/    Sign up×
Community /Pin to ProfileBookmark

need some help with a script..

Copy linkTweet thisAlerts:
Mar 06.2012

Hi , I have got a code I need to perform two actions:
1. After choosing an option – the link go button’s target changes – Done.
2. After choosing an option – the picture changes depending on the choice.

Just need help with the second action, the picture does not change.. If anyone could help me with this i’d really appreciate it.

Here it is:

[CODE]<html>

<form name=”jump”>
<select name=”menu”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>

</br></br>
Illustration:</br>
<IMG SRC=”a1.jpg” NAME=”thumbnail” id=”thumbnail” HEIGHT=”400″ WIDTH=”540″>
</br></br>
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/JAVASCRIPT”>

var a = document.getElementById(‘menu’).value;
var newImage = a+’.jpg’;
document.getElementById(‘thumbnail’).src = newImage;

</script>

<input type=”button” onClick=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value+’.htm’;” value=”GO”>
</form>

</html>
[/CODE]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 06.2012 — Problems:

1. Missing an id='menu' in the <select...> tag for the script to get the value for 'a'.

2. The source for the thumbnail should be 'a1.jpg' or 'a2.jpg' or 'a3.jpg'

What you create is '1.jpg' or '2.jpg' or '3.jpg'
<i>
</i>&lt;html&gt;

&lt;form name="jump" action="" method="post" onsubmit="return false"&gt;
&lt;select name="menu" id='menu'&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;/select&gt;

&lt;/br&gt;&lt;/br&gt;
Illustration:&lt;/br&gt;
&lt;IMG SRC="a1.jpg" NAME="thumbnail" id="thumbnail" HEIGHT="400" WIDTH="540"&gt;
&lt;/br&gt;&lt;/br&gt;
&lt;SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"&gt;
var a = document.getElementById('menu').value;
document.getElementById('thumbnail').src = 'a'+a+'.jpg';
&lt;/script&gt;
&lt;input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value+'.htm';" value="GO"&gt;
&lt;/form&gt;
&lt;/html&gt;

I'll have to believe you about your jump menu on option as I don't have the URLs to test.
Copy linkTweet thisAlerts:
@penguinoauthorMar 07.2012 — The pictures are loading only when refreshing the page.

I need the pictures to show instantly when the choice has made..

?
Copy linkTweet thisAlerts:
@penguinoauthorMar 07.2012 — This is what I did:

[CODE]<html>

<form name="jump" action="" method="post" onsubmit="return false">
<select name="menu" id='menu' onChange="loadCatch()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

</br></br>
Illustration:</br>
<IMG SRC="a1.jpg" NAME="thumbnail" id="thumbnail" HEIGHT="400" WIDTH="540">
</br></br>



<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

function loadCatch(){


var a = document.getElementById('menu').value;
document.getElementById('thumbnail').src = 'a'+a+'.jpg';


}

</script>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value+'.htm';" value="GO">
</form>
</html>[/CODE]
×

Success!

Help @penguino 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.16,
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,
)...