CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: change image on click... and back again.

  1. 07-14-2010, 11:10 AM #1
    Aravona
    Aravona is offline Junior Coders
    Join Date
    Jan 2010
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default change image on click... and back again.

    Ok I have a set of three image, which run at the top of the screen... when you click on one of these images it shows a hidden div, so it give the illusion of a drop down.

    You can see it working here

    What I need to do is change the top three images, so when the div is shown (done when you click the image) it then shows a new image at the top, and when you click to hide it, it shows the first image again.

    Basically the images have a + on them, when the drop down is there it needs to show a - instead ^^

    All the code is here:

    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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript"> 
<!-- 
var state = 'none'; 

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = state; 
} 
} 
//--> 
</script> 
</head>

<body>
<a name="sitemap"></a>
<table border="0">
<tr>
<td colspan="3">
<a href="#sitemap" onclick="showhide('div1');"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow1.png" border="0"
/></a><a href="#sitemap" onclick="showhide('div2');"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow2.png" border="0"
/></a><a href="#sitemap" onclick="showhide('div3');"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow3.png" border="0"/></a>
</td>
</tr>
<tr>
<td valign="top" width="216">
<div id="div1" style="display: none;"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/step1.png" border="0" usemap="#Map2" /></div>
</td>
<td valign="top" width="216">
<div id="div2" style="display: none;"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/step2.png" border="0" usemap="#Map3" /></div>
</td>
<td valign="top" width="216">
<div id="div3" style="display: none;"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/step3.png" border="0" usemap="#Map4" /></div>
</td>
</tr>
</table>

<map name="Map" id="Map">
<area shape="poly" coords="4,29,4,29,34,52,3,94,185,97,234,51,185,7,9,4" href="#sitemap" onclick="showhide('div1');" />
<area shape="poly" coords="202,9,239,50,206,94,400,94,437,51,397,4" href="#sitemap" onclick="showhide('div2');" />
<area shape="poly" coords="417,10,454,51,416,93,609,93,647,51,601,8" href="#sitemap" onclick="showhide('div3');" />
</map>

<map name="Map2" id="Map2"><area shape="rect" coords="3,5,196,92" href="http://www.sterlingchase.com/e-learning/members/?cat=8" /><area shape="rect" coords="3,98,195,185" href="http://www.sterlingchase.com/e-learning/members/?cat=7" /></map>
<map name="Map3" id="Map3"><area shape="rect" coords="3,192,197,283" href="http://www.sterlingchase.com/e-learning/members/?cat=11" /><area shape="rect" coords="3,99,197,186" href="http://www.sterlingchase.com/e-learning/members/?cat=12" /><area shape="rect" coords="3,4,197,92" href="http://www.sterlingchase.com/e-learning/members/?cat=13" /></map>
<map name="Map4" id="Map4"><area shape="rect" coords="3,373,195,462" href="http://www.sterlingchase.com/e-learning/members/?cat=15" /><area shape="rect" coords="3,282,195,370" href="http://www.sterlingchase.com/e-learning/members/?cat=16" /><area shape="rect" coords="4,190,194,279" href="http://www.sterlingchase.com/e-learning/members/?cat=24" /><area shape="rect" coords="4,98,194,185" href="http://www.sterlingchase.com/e-learning/members/?cat=64" /><area shape="rect" coords="4,4,196,93" href="http://www.sterlingchase.com/e-learning/members/?cat=78" /></map>
</body>
</html>
    But I'm not sure how to go about this, the javascript I've looked at so far doesnt do what I want, and I'm not smart enough to tweak it ^^

    would love some help on this, even if its just a link to a tutorial!

    Thanks,

    Aravona
    Reply With Quote Reply With Quote
  2. 07-14-2010, 12:16 PM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--

function showhide(layer_ref,imgobj,src1,src2) {
 var hza = document.getElementById(layer_ref);
 var state=hza.style.display!='block';
 hza.style.display = state?'block':'none';
 imgobj.src=state?src2:src1;
}
//-->
</script>
</head>

<body>
<a name="sitemap"></a>
<table border="0">
<tr>
<td colspan="3">
<a href="#sitemap"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow1.png" border="0"  onclick="showhide('div1',this,'http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow1.png','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/></a>
<a href="#sitemap"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow2.png" border="0"  onclick="showhide('div2',this,'http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow1.png','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/></a>
<a href="#sitemap"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow3.png" border="0"  onclick="showhide('div3',this,'http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/arrow1.png','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="216">
<div id="div1" style="display: none;"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/step1.png" border="0" usemap="#Map2" /></div>
</td>
<td valign="top" width="216">
<div id="div2" style="display: none;"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/step2.png" border="0" usemap="#Map3" /></div>
</td>
<td valign="top" width="216">
<div id="div3" style="display: none;"><img src="http://www.sterlingchase.com/e-learning/members/wp-content/themes/Sterling_Chase_M1v0.1/images/step3.png" border="0" usemap="#Map4" /></div>
</td>
</tr>
</table>

<map name="Map" id="Map">
<area shape="poly" coords="4,29,4,29,34,52,3,94,185,97,234,51,185,7,9,4" href="#sitemap" onclick="showhide('div1');" />
<area shape="poly" coords="202,9,239,50,206,94,400,94,437,51,397,4" href="#sitemap" onclick="showhide('div2');" />
<area shape="poly" coords="417,10,454,51,416,93,609,93,647,51,601,8" href="#sitemap" onclick="showhide('div3');" />
</map>

<map name="Map2" id="Map2"><area shape="rect" coords="3,5,196,92" href="http://www.sterlingchase.com/e-learning/members/?cat=8" /><area shape="rect" coords="3,98,195,185" href="http://www.sterlingchase.com/e-learning/members/?cat=7" /></map>
<map name="Map3" id="Map3"><area shape="rect" coords="3,192,197,283" href="http://www.sterlingchase.com/e-learning/members/?cat=11" /><area shape="rect" coords="3,99,197,186" href="http://www.sterlingchase.com/e-learning/members/?cat=12" /><area shape="rect" coords="3,4,197,92" href="http://www.sterlingchase.com/e-learning/members/?cat=13" /></map>
<map name="Map4" id="Map4"><area shape="rect" coords="3,373,195,462" href="http://www.sterlingchase.com/e-learning/members/?cat=15" /><area shape="rect" coords="3,282,195,370" href="http://www.sterlingchase.com/e-learning/members/?cat=16" /><area shape="rect" coords="4,190,194,279" href="http://www.sterlingchase.com/e-learning/members/?cat=24" /><area shape="rect" coords="4,98,194,185" href="http://www.sterlingchase.com/e-learning/members/?cat=64" /><area shape="rect" coords="4,4,196,93" href="http://www.sterlingchase.com/e-learning/members/?cat=78" /></map>
</body>
</html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 07-14-2010, 12:31 PM #3
    Aravona
    Aravona is offline Junior Coders
    Join Date
    Jan 2010
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks loads this is definately something I can work with
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules