Combining switch statement with onMouseOver to display text & image (javascript)
Question
I'm new to javascript and am looking to add what I think is a relatively simple function to my website (still being worked on and not yet hosted). I've been known to be horribly wrong when it comes to what I think should be simple, though. :)
I have effects I'm adding to display the image, but I can apply those now, so that's not currently a problem.
The reference materials I have don't go into this explicitly, so please pardon the fact that I'm probably butchering some of the code (especially that in the switching statement).
I would like the action of hovering (or onMouseOver) of a link (on the same page, but not near the divs) to display an image in a div and a text box in a separate div below the image. Any help in straightening this out would be appreciated.
I have four links with the following IDs:
#btn_a;
#btn_b;
#btn_c;
#btn_d;
I have four images with the following IDs:
#img_a = "img/ima.jpg";
#img_b = "img/imb.jpg";
#img_c = "img/imc.jpg";
#img_d = "img/imd.jpg";
I have four text boxes with the following IDs:
#txt_a = "Aaaa";
#txt_b = "Bbbb";
#txt_c = "Cccc";
#txt_d = "Dddd";
I have assigned two local variables:
var varTX; // text
var varIM; // images
The script I have is as follows:
THE JAVASCRIPT
function textBox(varTX){
var varTX=new text();
switch (varTX)
{
case 1: btn_a.onMouseOver: var varTX = "txt_a";
break;
case 2: btn_b.onMouseOver: var varTX = "txt_b";
break;
case 3: btn_c.onMouseOver: var varTX = "txt_c";
break;
case 4: btn_d.onMouseOver: var varTX = "txt_d";
break;
default: varTX = "no text";
}
function textBox(varIM){
var varIM=new image();
switch (varIM)
{
case 1: btn_a.onMouseOver: var varIM = "img_a";
break;
case 2: btn_b.onMouseOver: var varIM = "img_b";
break;
case 3: btn_c.onMouseOver: var varIM = "img_c";
break;
case 4: btn_d.onMouseOver: var varIM = "img_d";
break;
default: varIM = "no image";
}
THE HTML
<html>
<head>
<script type="text/javascript"></script>
</head>
<body>
<div id="target"><ul>
<li><a href="#" id="btn_a">test_a</a></li>
<li><a href="#" id="btn_b">test_b</a></li>
<li><a href="#" id="btn_c">test_c</a></li>
<li><a href="#" id="btn_d">test_d</a></li>
</ul></div>
<div class="images">
<a href="#">
<img src=<script>textBox("varIM")</script>
width="100%" height="30%" class="latest_img" /></a>
</div>
<div class="images">
<a href="#">
<h3 width="100%" height="30%" class="latest_img" />
<script>textBox("varTX")</script>
</h3></span></a>
</div>
</body>
</html>
3 answers
solution1
1 2011-08-12 20:48:42
There are several things wrong here.
1) This is invalid. You can't inline a <script> tag.
<img src=<script>textBox("varIM")</script>
width="100%" height="30%" class="latest_img" />`
2) You can't switch on two values in a switch statement, only one. This is wrong:
switch (varTX, varIM)
3) You can't have two elements with the same ID. That's invalid markup.
<div id="images">
...
<div id="images">
Fix these problems and post another question if you're still having trouble.
solution2
0 2011-08-12 21:32:29
As Others have pointed out there are a few issues with the code. I've tried to get the basic functionality working and clean up the markup a little. You can accomplish this with either javascript or jQuery
Method One (javascript)
Demo
This is a pure js way to do it. It's very incomplete so you'll have to work on it but this should give you a general idea of what you should be doing.
var links = document.getElementById("target").getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
links[i].onclick = function(){replaceImage(this); return false;}
}
function replaceImage(obj)
{
document.getElementById("imagesI").src = "img_" + obj.id.split("_")[1];
document.getElementById("imagesT").innerText = "txt_" + obj.id.split("_")[1];
}
Method Two (jQuery)
Demo 2
This is a jQuery way of doing it. Also incomplete, this will need work.
$("#target a").click(function(){
$("#imagesI").attr("src", "img_" + this.id.split("_")[1]);
$("#imagesT").html("txt_" + this.id.split("_")[1]);
return false;
})
If you get stuck or need help along the way don't hesitate to ask us for help. :)
solution3
0 2011-08-12 21:59:16
perhaps this will get you started, tossing out the switch and use the jquery:
<div id="target"><ul> <li><a href="#" id="btn_a">test_a</a></li> <li><a href="#" id="btn_b">test_b</a></li> <li><a href="#" id="btn_c">test_c</a></li> <li><a href="#" id="btn_d">test_d</a></li> </ul></div> <div id="images"> <a href="#"> <img src='' width="100%" height="20px" class="latest_img" /></a> </div> <div id="imagestext"> <a href="#"> <h3 width="100%" height="30%" class="latest_img" > </h3></span></a> </div> <div id='meme'>empty</div>
and the jquery:
$('#target').find('a').hover(function() {
var iamover = $(this).text();
$('#meme').text(iamover);
$('#images').find('img', function() {
$(this).attr('alt', iamover);
$(this).attr('src', 'myimage.jpg');
});
$('#imagestext').find('a>h3', function() {
$(this).text(iamover);
});
});
See it in action: http://jsfiddle.net/MarkSchultheiss/zah9X/
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.