Combining switch statement with onMouseOver to display text & image (javascript)_问答_开发者

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 t开发者_如何学JAVAo 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>

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.

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. :)

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/