Reputation: 93
I'm trying to write a script which changes image on mouse hover. I have 6 images, but the function is working for only one of them (the first one)
<div id="picture-container">
<img class="picture" id="360" src="360.jpg" onclick="enlarge(360);" onmouseover="pic_info(360);"
onmouseout="pic_ret(360);"/>
<img class="picture" id="bmx" src="bmx.jpg" onclick="enlarge(bmx);"/>
<img class="picture" id="buzludzha" src="buzludzha.jpg" onclick="enlarge(buzludzha);"
onmouseover="pic_info(buzludzha);"/>
<img class="picture" id="pirata" src="pirata.jpg" onclick="enlarge(pirata);"
onmouseover="pic_info(pirata);"/>
<img class="picture" id="snowboard" src="snowboard.jpg" onclick="enlarge(snowboard);"
onmouseover="pic_info(snowboard);"/>
<img class="picture" id="vitiskali" src="vitiskali.jpg" onclick="enlarge(vitiskali);"
onmouseover="pic_info(vitiskali);"/>
<img class="picture" id="ispolin" src="ispolin.jpg" onclick="enlarge(ispolin);"
onmouseover="pic_info(ispolin);"/>
</div>
And the script:
function pic_info(id) {
if (id == "360") {
var p = document.getElementById(id);
p.src = "360info.jpg";
}
if (id == "buzludzha") {
var p = document.getElementById(id);
p.src = "buzludzhainfo.jpg";
}
if (id == "pirata") {
var p = document.getElementById(id);
p.src = "piratainfo.jpg";
}
if (id == "snowboard") {
var p = document.getElementById(id);
p.src = "snowboardinfo.jpg";
}
if (id == "vitiskali") {
var p = document.getElementById(id);
p.src = "vitiskaliinfo.jpg";
}
if (id == "ispolin") {
var p = document.getElementById(id);
p.src = "ispolininfo.jpg";
}
As I said the script works only for picture with id="360" and it is imported in the head tag of the html document.The same thing happens with the function "enlarge();". Why is that and how can I fix it? Thank you, in advance!
Upvotes: 0
Views: 105
Reputation: 576
just to scratch the surface, are passing a variable instead of a string : enlarge(bmx);
should be : enlarge('bmx');
, and so on for the others
Upvotes: 7