dropdown that displays image and url when selected
Hi all,
I am creating a page with a dropdown menu that has 140 countries in the list. When someone clicks on say, Algeria, an image of Algeria comes up below the dropdown with a URL below that. I got the code to accomplish that much. What I need further help on is how to make the URLs a hyperlink (all different) as well as making the image clickable so that a larger version pops up when clicked on. I'm ok with starting from scratch if there is a better way to accomplish this than what I've got.
I don't know what's better ... there's always someone who code better than me.
The best is what works and is understandable to the coder and user.
What you currently have seems to meet both those criteria.
My only suggestion would be to move the values of the select box to a text (read with ajax functions) or external JS file. The select box and options could be dynamically created.
Why? ... because:
If in a text file, then it would be easier to add and/or make changes/corrections.
If an error is created when modifications are made directly to the script or external JS file, the program may stop completely,
but if the error is one entry of a text file, then only one display is effected and the program should continue to run.
But if you edit carefully every time you make changes, then I see no difference between techniques.
You did not provide the correct URLs to see if the images worked, so I provided some of my own goofy ones.
Make the appropriate changes to display your images.
Click anywhere in the 'blocked' area to simulate going to a specific URL. Right now I just show an alert message.
Code:
<html>
<head>
<title>Selectable Images</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/forumdisplay.php?s=&daysprune=&f=3
var imgList = [
"Select Country$http://www.worldatlas.com/webimage/world/polit/politbd.gif$#",
// valid images and correct URLs need to be given here
// "Algeria$Algeria.png$www.url.com/algeria",
// "Angola$Angola.png$www.url.com/angola"
// substitute other countries, pictures, captions and links below
"Exhaused$http://www.nova.edu/hpd/otm/pics/4fun/11.jpg$http://www.google.com",
"Confused$http://www.nova.edu/hpd/otm/pics/4fun/12.jpg$http://www.yahoo.com",
"Ecstatic$http://www.nova.edu/hpd/otm/pics/4fun/13.jpg$http;//www.bing.com",
"Guilty$http://www.nova.edu/hpd/otm/pics/4fun/14.jpg$http://www.webdeveloper.com",
"Suspicious$http://www.nova.edu/hpd/otm/pics/4fun/15.jpg$http://www.codingforums.com" // NOTE: no comma after last entry
];
function Populate(IDS,Items){
var tmp = [];
var sel = document.getElementById(IDS); // alert(IDS+':'+sel.id);
sel.options.length=0;
for (var zxc0=0;zxc0<Items.length;zxc0++){
if (Items[zxc0]){
tmp = Items[zxc0].split('$'); // could use rest of 'tmp' differently below
sel.options[sel.options.length]=new Option(tmp[0],tmp[0],true,true);
}
}
sel.selectedIndex=0;
}
function show(sel) {
if (sel < 0) { sel = 0; }
var pair = imgList[sel].split("$");
document.getElementById("Picture").src =pair[1];
document.getElementById("Caption").innerHTML = pair[0];
}
function GoToURL() {
var ndx = document.getElementById('Country').selectedIndex;
if (ndx <= 0) { return; }
var pair = imgList[ndx].split("$");
alert('Go To: '+pair[2]); // for testing purposes
// document.location.href = pair[2]; // un-comment this after testing
}
onload = function () {
show(0);
}
</script>
<body>
<form action="" onsubmit="return false">
<select id="Country" name="Country" onchange="show(this.selectedIndex)">
<script type="text/javascript">Populate('Country',imgList)</script>
</select>
<br>
<div onclick="GoToURL()" style="width:200px; text-align:center; border:5px solid orange">
<img id="Picture" src="" alt="Picture" height="124" width="200" />
<br><span id="Caption">Caption of Picture</span>
</div>
</form>
</body>
</html>
I created an 'imgList' array that you could put into an external JS file,
leave where it is after expansion
or convert to a text file and read with some ajax functions from your server.
Post back about any portions you don't understand.
Reply With Quote
Something to consider ...
Bookmarks