Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 47
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Image Tricks Using Javascript?

    Heres a section where I want people to post Scripts to perform tricks with images. It would be quite useful for most people I reckon. So will anyone please post your image tricks scripts an its descrition?

    Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?

    Thanks to anyone that participates in this thread.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here, needs work but you can play with this:

    Code:
    <BASE HREF="http://www.andrewgray.com/">
    <style>
    <!--
    .drag{position:relative;cursor:hand}
    -->
    </style>
    
    
    <script type="text/javascript">
     <!--//
     var count = 0;
      function creatImage(option){
       var element = document.body;
       var newImage = document.createElement('img');
           newImage.src = option.value;
           newImage.style.zIndex = 10;
           newImage.className = "drag";
           newImage.ondblclick = Zoom;
           newImage.oncontextmenu = unZoom;
           element.appendChild(newImage);
      }
    
      function Zoom(){
        this.style.setAttribute('zoom','150%');
      }
    
      function unZoom(){
        this.style.setAttribute('zoom','');
        return false;
      }
    
    
    /*
    Drag and Drop Script- 
     Dynamic Drive (www.dynamicdrive.com)
    For full source code, installation instructions,
    100's more DHTML scripts, and Terms Of
    Use, visit dynamicdrive.com
    */
    var index = 0;
    var dragapproved=false;
    var z,x,y;
    function move(){
    if (event.button==1&&dragapproved){
    z.style.pixelLeft=temp1+event.clientX-x;
    z.style.pixelTop=temp2+event.clientY-y;
    return false;
    }
    }
    function drags(){
    if (!document.all)
    return;
     
    else if(event.srcElement.className=="drag"){
    dragapproved=true;
    z=event.srcElement;
    temp1=z.style.pixelLeft;
    temp2=z.style.pixelTop;
    
    index=index+1;
    z.style.zIndex=eval(z.style.zIndex+index);
    status=z.style.zIndex; // FOR Z-INDEX TESTING ONLY //;
    
    x=event.clientX;
    y=event.clientY;
    document.onmousemove=move;
    }
    }
    document.onmousedown=drags;
    document.onmouseup=new Function;
     //-->
    </script>
    </HEAD>
    
    <BODY>
    <div><P>Create an image:
    <form> 
    <select onchange="creatImage(this)">
    <option>Choose A Picture</opton>
    <option value="monkey.gif">Monkey</option>
    <option value="travel.gif">Palm Trees</option>
    <option value="essays.gif">Quill & Paper</option>
    <option value="computer.gif">Computer & Modem</option>
    
    </select>
    </form></div>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You guys have WAY too much free time on your hands. And, apparently, so do I because I enjoyed playing with these image gizmos.

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?
    Here's how I would do it.
    make an image with an id and an onclick command:
    <img src="wtv.gif" id="theTrick" onclick="perform()" />

    then in the script:
    function perform(){

    //get that image
    var image=document.getElementById("theTrick");
    //establish the two images I want to have available on click
    var imageOne="wtv.gif";
    var imageTwo="asd.gif";
    //see which image is there right now and set the src attribute of "theTrick" to the other image
    if(image.getAttribute("src")==imageOne){
    image.setAttribute("src",imageTwo);
    } else {
    image.setAttribute("src",imageOne);
    }
    //There you go
    }

    Of course once you've got that down, you can make changes to the script to make it accomodate any number of images, make it work with many images on one same page, etc..
    But that will be a little longer, I'll go do that and I'll post again once it's done.
    Until then, I hope what I gave you is enough to get you started
    Last edited by shlagish; 06-26-2004 at 03:18 AM.
    Shawn

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is what I ended up with.
    Have a try yourself and show us what you come up with
    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function perform(theImg){
    
     var listImgs=["swirl.gif","xout2.gif","maxamize2.gif"], i;
    
     for(i=0;i<listImgs.length;++i){
      if(theImg.getAttribute("src")==listImgs[i]){
       if(i==listImgs.length-1){
        i=-1;
       }
       theImg.setAttribute("src",listImgs[i+1]);
       end();
      }
     }
    }
    //-->
    </script>
    </head>
    <body>
    <img src="swirl.gif" onclick="perform(this)" />
    <img src="maxamize2.gif" onclick="perform(this)" />
    
    </body>
    </html>
    Shawn

  • #7
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thanks you lot. I'm currently testing the scripts and changing them to my needs.

    Although these scripts are great I was thinking of a script where the images used can be defined in the image tag something like <img src=image.gif onclick=switchTo('image2.gif, image.gif')> the reason I have included the image in the tag twice is simply because if the image has been clicked the image will be at 'image2.gif' and when the image is clicked again it needs something to switch back to which is 'image.gif'.

    I reckon that should be the answer with most image swich scripts because firstly you'd be able to put the script in a js file e.g. 'script.js' so you can link any html asp etc.. file to it and the second reason is that the images aren't defined in the script so the script stays small and easy to use.

    So if anyone, anywhere can come up with an answer will you please post it on this thread?

    Last edited by MichaelBowler; 06-27-2004 at 08:13 PM.

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's a script, after a little help.

    For what it's worth:

    Code:
    function imageFlips(paramOne,paramTwo)
    {
    if(document.images)
      {
        document.images[paramOne].src=paramTwo;
      }
    else
      {
        alert("There's no image by the name of " + paramOne);
      }
    }
    And to make a call to it, you do something like this,

    Code:
    <br>
    <a href="javascript:void(0);" onmouseover="imageFlips('flower','triangle.bmp');"
    onmouseout="imageFlips('flower','flower.bmp');">
    <img id="flower" src="flower.bmp">
    </a>
    <br>
    LovesWar

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by MichaelBowler
    Heres a section where I want people to post Scripts to perform tricks with images. It would be quite useful for most people I reckon. So will anyone please post your image tricks scripts an its descrition?

    Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?

    Thanks to anyone that participates in this thread.
    At first, I thought you were talking of image tricks like this:
    Code:
    function logAccess(url){
       var accessLinkCounter = new Image();
       accessLinkCounter.src = "counter.asp?link=" + escape(url);
    }
    ...
    <a href="page1.htm" onclick="logAccess(this.href)">page 1</a>
    <a href="page2.htm" onclick="logAccess(this.href)">page 2</a>
    That image trick sends request on the server without refreshing the page. That is usually used to access server-side codes that doesn't need some output back on the client.

    Other use of the image trick is "preloading" non-image files while a "Loading..." message is shown. It is demonstrated in the "Popup DocViewer" link in my sig.

  • #10
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could give two imgs id's then switch them dynamically like
    Code:
    <img src="foo.gif" id="foo" onClick="switchWith('bar')">
    <img src="bar.gif" id="bar" onClick="switchWith('foo')">
    Shouldn't be too hard to implement.

  • #11
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    function switchWith(it, id)
      {
        var buffer=it.src
        it.src=document.getElementById(id).src;
        document.getElementById(id).src=buffer;
      }
    Viola, call it as
    Code:
    <img src="images/mq_logo_top.gif" id="foo" onClick="switchWith(this, 'bar')">
    <img src="images/mq_logo_top_class.gif"  id="bar" onClick="switchWith(this, 'foo')">

  • #12
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I forgot to mention I use Internet Explorer 6.02600.0000.xpclient.010817-1148

  • #13
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Just searched the net and found a script that I modified a little and came out with this
    ---------------
    <html><head><script type="text/javascript">

    function init() {
    if (!document.getElementById) return
    var imgOriginSrc;
    var imgTemp = new Array();
    var imgarr = document.getElementsByTagName('img');
    for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
    imgTemp[i] = new Image();
    imgTemp[i].src = imgarr[i].getAttribute('hsrc');
    imgarr[i].onclick = function() {
    imgOriginSrc = this.getAttribute('src');
    this.setAttribute('src',this.getAttribute('hsrc'))
    }
    elseif
    {
    {
    this.setAttribute('src',imgOriginSrc)
    }
    }
    }
    }
    onload=init;

    </script></head><body>
    <br>

    <img src="user_offline.gif" hsrc="printer.gif">
    </a>
    <br>
    </body></html>
    ----------------------
    trouble is it isn't working can someone tell me whats wrong please?

  • #14
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now this thread been here for some day so I am just curious are there actually a request for help in it, cause as I read it its more a post a script thread?

  • #15
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    I did intend it to help people with image trick scripts. But I also wanted people to post Scripts as well.


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •