/    Sign up×
Community /Pin to ProfileBookmark

Drop Down Images with Hyperlink Question

Copy linkTweet thisAlerts:
Mar 19.2009

Hi I was wondering if someone had a minute to show me how I might be able to match up changing hyperlinks to the below drop-down images selection script.

Thanks so much.

[CODE]
<html>
<head>

<script>

var Path=’images/’;

function CngColor(obj){
index=obj.selectedIndex;
if (index<1){document.getElementById(‘Img1’).src=”images/Blank.gif”; return; }
document.getElementById(‘Img1’).src=Path+obj.options[index].id;
}

</script>

</head>

<body>

<select onchange=”CngColor(this);” >
<option >Select</option>
<option id=”image1.jpg” value=”Image 1″ >Image 1</option>
<option id=”image2.jpg” value=”Image 2″ >Image 2</option>
<option id=”image3.jpg” value=”Image 3″ >Image 3</option>
</select>

<a href=”#”>
<img id=”Img1″ src=”images/Blank.gif” width=100 height=100 >
</a>

<script type=”text/javascript”>
window.onload=
function() {
var sels = document.getElementsByTagName(‘select’);
CngColor(sels[0]);
CngColor2(sels[1]);
CngColor3(sels[2]);
};
</script>

</body>

</html>

[/CODE]

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 20.2009 — I made a few changes:

1. added alt= to image and set to image filename --> can be removed later

2. enlarged image display to show alt= value as part of test --> also can be removed

3. Bypassed window.onload function because 'CngColor2()' and 'CngColor3()" functions are not defined.

Could not test further because you gave no images or links to view.

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Image Selection&lt;/title&gt;
&lt;script type="text/javascript"&gt;

var Path='images/';

function CngColor(obj) {
index=obj.selectedIndex;
if (index&lt;1) {
document.getElementById('Img1').src="images/Blank.gif";
document.getElementById('Img1').alt="images/Blank.gif";
return;
}
document.getElementById('Img1').src=Path+obj.options[index].id;
document.getElementById('Img1').alt=Path+obj.options[index].id;
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;select onchange="CngColor(this);" &gt;
&lt;option&gt;Select&lt;/option&gt;
&lt;option id="image1.jpg" value="Image 1" &gt;Image 1&lt;/option&gt;
&lt;option id="image2.jpg" value="Image 2" &gt;Image 2&lt;/option&gt;
&lt;option id="image3.jpg" value="Image 3" &gt;Image 3&lt;/option&gt;
&lt;/select&gt;

&lt;a href="#"&gt;

&lt;!-- img id="Img1" src="images/Blank.gif" alt='' width='100' height='100' --&gt;
&lt;img id="Img1" src="images/Blank.gif" alt='' width='200' height='100' &gt;
&lt;!-- above for testing purposes only --&gt;

&lt;/a&gt;

&lt;!--
&lt;script type="text/javascript"&gt;
window.onload=
function() {
var sels = document.getElementsByTagName('select');
CngColor(sels[0]);
CngColor2(sels[1]); // cannot find function
CngColor3(sels[2]); // cannot find this function either
};
&lt;/script&gt;
--&gt;

&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @theflyingminst spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...