Hello forum,
My name is juan and recently started html programming. I have a web page with a drop box with the name of states.
Code:

<option value="">Alabama</option>
<option value="">Alaska</option>

I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event.

Im using Ibox in order to have a image of the state open.

Code:

<a href="images/large/image_1b.jpg" rel="ibox" title="alabama at 1024x450!"><img
src="images/small/image_1.jpg" alt=""/></a>

the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event?

Recommended Answers

All 2 Replies

rationalise the code so images have the same name as the state value options,
saomething like

<select onchange='document.getelementbyid("smallimg").src="images/small/image_"+self.value()+".jpg";document.getelementbyid("imglink").href()="images/large/image_"+self.value()+".jpg";' name='state'>
<option value='1' selected='selected'>Alabama</option>
<option value='2'>Alaska</option>
<!-- etc -->
<option value='50'>Wyoming</option></select>
<a id='imglink' href='images/large/image_1.jpg' title='alabama at 1024*450'>
<img id='smallimg' src='images/small/image_1.jpg' alt='' width='50' height='50'/>
</a>

width and height specified for small image, a html requirement for code validation

selected makes the initial value match the initial state of the image link

consider adding a javascript between </body> and </html> to postload the alternate images ( with 50 possibilities delay to load the small image from the server 'onclick' may be catastrophic in user retention, a post load acts unseen to the user, and appears to display images instantly

</body><script type="text/javascript">
//<![CDATA[
<!-- 
image2 = new Image();
image2.src = "images/small/image_2.jpg";
// etc
image50 = new image();
image50.src = "images/small/image_50.jpg";
//-->
//]]></script>
</html>

the javascript does not do anything with the images, just places them in the browser cache ready for any onclick event

if wyoming isnt 50, sorry, I'm Australian living in Canada, apart from airports I havent been in the US in 15 years, I spent 6 months at a USAF base then, didnt get out much, dont know state names in the us

Im not sure bout most of the stuff and i accidently posted bad code..
What im trying to do is have a drop box with the 50 states. when one of the names is selected in the drop box it will popup a picture of the state.

<a href="images/large/image_1b.jpg" rel="ibox" title="alabama at 1024x450!">

the javascript im using is ibox.js. thats why im using rel="ibox". what the script does it opens the picture in a framed box.
I can make a link like:

<a href="images/large/image_1b.jpg" rel="ibox" title="alabama at 1024x450!"> Click Here<a/>

and if i click it it will post the picture in a new window with a custom frame.
Instead of a link i need the drop box selected and open the frame :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.