dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Click on one image to change another image on the same page

  1. #1
    Join Date
    Jul 2010
    Location
    Sydney
    Posts
    2

    Click on one image to change another image on the same page

    I have a page which is a large graphic sliced up into various pieces for better loading. It's a drawing of a bedroom and I need to have it set up so that when a user clicks on a link that is mapped to a frame hanging on the wall, it opens the doors of a cupboard. The photoframe and the cupboard are in different images.

    I thought of using a Javascript image rollover but I can't see how that can be used to change a different image rather than the image that has the link in it.

    I've done a little Javascript editing before but I'm very, very new at it. Am happy to upload the code and images to the web if required.

    Will HUGELY appreciate any help, thanks.

  2. #2
    Join Date
    May 2006
    Location
    the netherlands
    Posts
    454
    I have a page which is a large graphic sliced up into various pieces for better loading.
    There's some debate about whether that actually helps. You probably didn't reduce the overall size, which means it could actually load slower because of the simultaneous server requests needed.

    I thought of using a Javascript image rollover but I can't see how that can be used to change a different image rather than the image that has the link in it.
    Very simple. Give an id to your images so they can be uniquely identified. In the mouseover function, either pass the id of the current image and map it to another, or directly pass the id of the image you want to swap

    <img src="one.jpg" id="one" onmouseover="swapImage('two')">
    <img src="two.jpg" id="two" onmouseover="swapMappedImage(this.id)">

  3. #3
    Join Date
    Jul 2010
    Location
    Sydney
    Posts
    2
    Thanks Marty. I'm not sure how to apply that to my code. I've got the onclick image swap happening in the image map, but it's not swapping out the other image. I also want to add in the functionality that if you click the frame it restores the shut cupboard. You can view the page as I've set it up at http://www.scallywagpress.com.au/test.html - the hotspot is on the Boys Books frame. For some reason the mouse isn't changing on rollover for that. Arrghh sorry I know I'm a total noob.

    The code is here:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body onload="MM_preloadImages('images/MiddleLeft_ex.jpg')" >

    <img src="images/TopCentre.jpg" alt="TEST" name="TEST" width="521" height="324" border="0" usemap="#TESTMap" id="TEST" />
    <map name="TESTMap" id="TESTMap">
    <area shape="rect" coords="162,176,248,256" onclick="MM_swapImage('TEST','','images/MiddleLeft_ex.jpg',1)" />
    </map>


    <img src="images/MiddleLeft.jpg" width="246" height="328" alt="MiddleLeft" />
    </body>
    </html>

  4. #4
    Join Date
    May 2006
    Location
    the netherlands
    Posts
    454
    that javascript you have there is generated by something like dreamweaver, right? it's horrible unreadable stuff.

    but well, to focus on your problem. here's what you can do:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <base href="http://www.scallywagpress.com.au/" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function swapImage(index)
    {
    	// middleLeftExImages can contain images for girls books, boys books, etc. start with girls, then boys, etc.
    	middleLeftExImages = ['MiddleLeft_ex.jpg','MiddleLeft_ex.jpg'];
    	if (index == -1)
    	{
    		document.getElementById('middleLeft').src = 'images/MiddleLeft.jpg';
    	}
    	else
    	{
    		// the first image is referenced by index = 0, the second by index = 1, etc.
    		document.getElementById('middleLeft').src = 'images/'+middleLeftExImages[index];
    	}
    }
    </script>
    </head>
    
    <body onload="MM_preloadImages('images/MiddleLeft_ex.jpg')" >
    
    <div style="width: 521px;">
    	<img src="images/TopCentre.jpg" alt="TEST" name="TEST" width="521" height="324" border="0" usemap="#TESTMap" id="TEST" />
    	<map name="TESTMap" id="TESTMap">
    	<area shape="rect" coords="162,176,248,256" onclick="swapImage(1)" />
    	</map>
    
    	<img src="images/MiddleLeft.jpg" width="246" height="328" alt="MiddleLeft" id="middleLeft" onclick="swapImage(-1)"/>
    </body>
    </html>
    just copy-paste this to a html-file on your computer and open it in your browser. I've left out the preloading stuff since that is not part of your problem.
    Note: when you copy (part of) this to the code you're gonna put online, you may want to leave out the <base> tag again. i've done that so you don't have to put all the images locally.

    short explanation; this line:

    middleLeftExImages = ['MiddleLeft_ex.jpg','MiddleLeft_ex.jpg'];

    creates an array with the images that can be used for swapping. it only contains two images (with the same name in this case), but you can extend it to the four items you have in your picture and define a seperate image for each item, so that the girls-item opens a different item then boys. The girls-picture should be the first in the array and can be referenced by index 0. (boys is index=1, etc.)

    i hope this helps

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles