Ролловер текст / ссылка на основе IMG, чтобы показать изображение - PullRequest
Новая
       0

Ролловер текст / ссылка на основе IMG, чтобы показать изображение

0 голосов
/ 28 июля 2011

Я нашел флешку на веб-сайте, который я хотел бы эмулировать с помощью JQuery: http://www.jbcoxwell.com/construction_services.html

При поиске на этом сайте я нашел один пост, полезный в качестве основы для запуска моего скрипта: Show #id - скрыть #id при наведении мыши на другой # id

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

Вот мой HTML-код: 

<body><div id="container">
<div class="text" id="txt1">Service 1</div>
<div class="text" id="txt2">Service 2</div>
<div class="img" style="display: none" id="img1">Photo 1</div>
<div class="img" style="display: none" id="img2">Photo 2</div></div></body>

Мой CSS: 

 #img1 {
 background-image: url(image/img1.jpg);
 background-color: red;}
 #img2 {
 background-image: url(image/img2.jpg);
 background-color: blue;}    
.text {
 width: 150px;
 height: 15px;
 background-color: #7a7a7a;
 float: left;
 clear: left;
 margin-bottom: 25px;}
.img {
 width: 300px;
 height: 100px;
 float: right;}

И мой файл .js: 

$(function() {
    // define the mouseover event for text
$('.text'+this.id).mouseover(function() {
        $('.img').css('display', 'block');
    });

    // define the mouseout event for text       
$('.text'+this.id).mouseout(function() {
        $('.img').css('display', 'none');
    });

});

Я потратил время на просмотр этого и других сайтов для фрагментов здесь и там, но мне кажется,продолжай в кругах.Я хотел бы понять, где я иду не так с этим.Спасибо за ваше время!

* Редактировать: Вот самая функциональная версия, которую я смог сделать это: http://jsfiddle.net/aburgin/EKb4E

Ответы [ 3 ]

0 голосов
/ 28 июля 2011 
<div id="container">
<div class="text" id="image1">Service Name 1</div>
<div class="text" id="image2">Service Name 2</div>
<div class="img image1" style="display: none" id="1">Photo 1</div>
<div class="img image2" style="display: none" id="2">Photo 2</div>
</div>


$(function() {
    // define the mouseover event for text
    $('.text').mouseover(function() {
        $('.' + $(this).attr("id")).css('display', 'block');
    });

 $('.text').mouseout(function() {
    $('.' + $(this).attr("id")).css('display', 'none');
});

});

http://jsfiddle.net/jensbits/EKb4E/56/

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

Благодаря Деннису и Джен я смог использовать их ответы, чтобы придумать почти полный сценарий, чтобы подражать примеру в моем первоначальном посте.Я использовал структуру сценария Джен, но включил в себя хитрый трюк, которым поделился Деннис.Текстовые имена данных используются в именах моих изображений вверх / поверх, поэтому я мог соединить их вместе, манипулируя ими в скрипте.Единственная недостающая часть - это то, что находящийся предмет остается видимым, пока другой предмет не будет обнаружен.Но это то, что я постараюсь выяснить самостоятельно.Вот что мне удалось собрать:

HTML: 

<div id="serv_list">
  <div id="text_list">
    <div class="text" id="img1" data-text="serv1" style="background-image: url(services/serv1_up.png);"></div>
    <div class="text" id="img2" data-text="serv2" style="background-image: url(services/serv2_up.png);"></div>
  </div>
  <div id="img_list">
    <div class="img img1" style="display: none" id="1"></div>
    <div class="img img2" style="display: none" id="2"></div>
  </div>
</div>

CSS: 

#serv_list {
margin-top: 20px;}
.img1 {
background-image: url(services/serv1.jpg);}
.img2 { 
background-image: url(services/serv2.jpg);}
#text_list {
float: left;
width: 200px;}
.text {
width: 200px;
height: 18px;
float: left;
clear: left;
margin-bottom: 25px;}
#img_list {
float: right;
width: 450px;}
.img {
width: 450px;
height: 300px;
float: right;
clear: both;}

JS: 

$(function() {
$('.text').mouseover(function() {
var bg = $(this).data("text");
$('.' + $(this).attr("id")).css('display', 'block');
$(this).css('cursor','pointer');
$(this).css('background-image', 'url(services/' + bg + '_ovr.png');
});
$('.text').mouseout(function() {
$('.' + $(this).attr("id")).css('display', 'none');
$(this).css('background-image', 'url(services/' + $(this).data("text") + '_up.png');
});
});
0 голосов
/ 28 июля 2011

Попробуйте это: http://jsfiddle.net/hAsX3/2/

В итоге вы использовали идентификаторы # 1 и # 2 для нескольких элементов - не делайте этого. Я сохранил идентификатор соответствующего элемента в атрибуте данных текстового элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...