PDA

View Full Version : change image on click... and back again.



Aravona
07-14-2010, 11:10 AM
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 (http://www.evolutionbusinessservices.co.uk/charlene/arrowtest.html#sitemap)

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:


<!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

vwphillips
07-14-2010, 12:16 PM
<!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>

Aravona
07-14-2010, 12:31 PM
Thanks loads this is definately something I can work with :D