Объединение оператора switch с onMouseOver для отображения текста и изображения (javascript) - PullRequest
Новая
       30

Объединение оператора switch с onMouseOver для отображения текста и изображения (javascript)

0 голосов
/ 13 августа 2011

Я новичок в javascript и собираюсь добавить, что я думаю, что это относительно простая функция на моем сайте (все еще работает и еще не размещен).Я, как было известно, ужасно неправ, когда дело доходит до того, что я думаю, должно быть просто.:)

У меня есть эффекты, которые я добавляю для отображения изображения, но я могу применить их сейчас, так что в настоящее время это не проблема.

Справочные материалы, в которые я не вхожуэто явно, поэтому прошу прощения за тот факт, что я, вероятно, вырезать часть кода (особенно это в операторе переключения).

Я хотел бы действие зависания (или onMouseOver) ссылки (нана той же странице, но не рядом с элементами div), чтобы отобразить изображение в элементе div и текстовое поле в отдельном элементе div под изображением.Любая помощь в исправлении этого была бы признательна.

У меня есть четыре ссылки со следующими идентификаторами: 

 #btn_a;
 #btn_b;
 #btn_c;
 #btn_d;

У меня есть четыре изображения со следующими идентификаторами: 

#img_a = "img/ima.jpg";
#img_b = "img/imb.jpg";
#img_c = "img/imc.jpg";
#img_d = "img/imd.jpg";

У меня есть четыре текстовых поля со следующими идентификаторами: 

#txt_a = "Aaaa";
#txt_b = "Bbbb";
#txt_c = "Cccc";
#txt_d = "Dddd";

Я назначил две локальные переменные: 

var varTX; // text
var varIM; // images

У меня есть следующий сценарий:

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";
}

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 ]

1 голос
/ 13 августа 2011

Здесь несколько вещей не так.

1) Это неверно. Вы не можете вставить тег <script>. 

<img src=<script>textBox("varIM")</script>
width="100%" height="30%" class="latest_img" />`

2) Вы не можете включить два значения в операторе switch, только одно. Это неправильно: 

switch (varTX, varIM)

3) У вас не может быть двух элементов с одинаковым идентификатором. Это неверная разметка. 

<div id="images">
...
<div id="images">

Исправьте эти проблемы и отправьте другой вопрос, если у вас все еще есть проблемы.

0 голосов
/ 13 августа 2011

возможно, это поможет вам начать работу, выбросить коммутатор и использовать 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>

и 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);
    });
});

Посмотрите его в действии: http://jsfiddle.net/MarkSchultheiss/zah9X/

0 голосов
/ 13 августа 2011

Как отметили другие, есть несколько проблем с кодом. Я попытался заставить работать базовый функционал и немного очистить разметку. Вы можете сделать это с помощью javascript или jQuery.

Метод первый (javascript)

Демо

Это чистый способ сделать это. Он очень неполный, поэтому вам придется работать над ним, но это должно дать вам общее представление о том, что вы должны делать. 

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];
}


Метод второй (jQuery)

Демо 2

Это способ сделать jQuery. Также неполное, это потребует работы. 

$("#target a").click(function(){
    $("#imagesI").attr("src", "img_" + this.id.split("_")[1]);
    $("#imagesT").html("txt_" + this.id.split("_")[1]);
    return false;
})


Если вы застряли или нуждаетесь в помощи по пути, не стесняйтесь обращаться к нам за помощью. :)

...