Change a dropdown menu array to a regular unordered list without jQuery
Question
I have a have a javascript array to make an image change when its name is selected (Waterfall, Sunset, White Tree). It is in the form of a dropdown menu right now, but I am wondering if I can change it to just a regular unordered list. I do not want to use jquery.
If the array cannot be changed to an unordered list, is there any other way to change the content in a div based on user interaction (onclick)? ie three different links below an image. Once a link is clicked, a different image is loaded into the div. This must be done with one function.
HTML
<body>
<img src="images/photo1.jpg" name="sunset">
<ul>
<select onClick=imageSwap(this) name=cached>
<option value=image1>Sunset</option>
<option value=image2>Waterfall</option>
<option value=image3>White Tree</option>
</select>
</ul>
</body>
JAVASCRIPT
if(document.images) {
imageSwap = new Array();
image1 = new Image()
image1.src = "images/photo1.jpg"
image2 = new Image()
image2.src = "images/photo2.jpg"
image3 = new Image()
image3.src = "images/photo3.jpg"
function imageSwap(list) {
var img = list.options[list.selectedIndex].value;
document.sunset.src = eval(img + ".src");
}
}
1 answers
solution1
0 2013-02-04 20:00:43
You can create links like these:
<a href="#" onclick="changeImg('image1.jpg')">Image 1</a>
<a href="#" onclick="changeImg('image2.jpg')">Image 2</a>
and a function:
function changeImg(src) {
document.getElementById("imgId").src = src;
}
where imgId is the id of your <img> element.
Here is an example:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.