PDA

View Full Version : Resolved Drop Down menus and images



Geodesic_D
Oct 22nd, 2009, 11:09 AM
I'm currently looking to revamp the Link Exchange section on my website.

Rather than clutter it with banners, I am going to put all the links into a drop down menu, with the banner for the selected site under it.

The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else.

This is the code I am using to change it:


function defineimage()
{
if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
{
document.images.linkimage.src = '/images/exchange/jeff.gif'
}
else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
{
document.images.linkimage.src = '/images/exchange/SCH.jpg'
}
}

And this is my drop down menu, and the image I'd like to change:


<p><select name="gourl" onChange="defineimage()">
<option value="http://www.strangedrawingsartgallery.com" selected>Strange City Heroes</option>
<option value="http://jeff.zhomg.com">Invincible Jeff</option>
</select>&nbsp;<input type="submit" name="Submit" value="Go to Site" onClick="dropdown()"></p><p><img src="/images/exchange/SCH.jpg" alt="SCH" name="linkimage" width="468" height="60" border="0" id="linkimage"></p>

If you are unsure what I mean by this, you can see for yourself by going to the page in question (http://www.chrisgmodcomic.com/linkex.html) and selecting 'Invincible Jeff' from the list. The banner will change, but you won't be able to change the selection again.

Many thanks (again) for the help.

vwphillips
Oct 22nd, 2009, 02:26 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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/


function GoTo(nu){
var ary=[];
ary[0]=['http://www.vicsjavascripts.org.uk/StdImages/Blank.gif','#'];
ary[1]=['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/'];
ary[2]=['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://209.188.89.109/forumdisplay.php?f=2'];
ary[3]=['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','http://www.webdeveloper.com/forum/forumdisplay.php?s=&daysprune=30&forumid=3'];
if (ary[nu]){
document.getElementById('select').selectedIndex=nu;
document.getElementById('Image').src=ary[nu][0];
document.getElementById('Link').onclick=function(){
window.top.location=ary[nu][1];
}
}
}

/*]]>*/
</script>

</head>

<body onload="GoTo(1);">
<select id="select" size="1" onchange="GoTo(this.selectedIndex);">
<option >Select Site</option>
<option selected="true" >Site 1</option>
<option >Site 2</option>
<option >Site 3</option>
</select>
<input id="Link" type="button" name="" value="Goto" />
<img id="Image" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="200" height="50" />

</body>

</html>

Geodesic_D
Oct 22nd, 2009, 02:47 PM
Thanks for that. Works like a charm!