Измените два содержимого div на изображении при наведении курсора в отдельном div

Я пытаюсь изменить два (предварительный просмотр) элемента div с помощью mouseover на изображении кнопки со ссылкой.

В одном из превью-дивов будет показано изображение, которое я хотел бы связать с определенным сайтом.

Изображение кнопки также имеет функциональный класс mouseover в CSS.

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

Также я хотел бы добавить, что я новичок в написании сценариев, но очень хочу учиться.

На mouseout или click не важно, текущее (превью) содержимое может остаться как на прошлый mouseover.

В настоящее время изменение содержимого div предварительного просмотра работает путем добавления document.getElementById к привязке и img отдельно к каждой кнопке, как указано в следующем беспорядочном коде, но я ищу более чистый подход, например, что-то с javascript или jquery и с использованием vars и сделать изображение предварительного просмотра кликабельным и связанным с просматриваемым сайтом [EDIT:]Этот код ДЕЙСТВИТЕЛЬНО работает, чтобы сделать изображение предварительного просмотра ссылкой[/EDIT]

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

<div class="btn">

 <a href="http://www.previewed_site.com" target="_blank"
 onmouseover="document.getElementById('preview_text_content')
 .innerHTML = 'a short preview description here';">

  <img onmouseover="document.getElementById('preview_img_content')
  .innerHTML = '<a href=\'http://www.previewed_site.com\'>
  <img src=\'preview.jpg\' /></a>';" src="btn.png" width="100px"
  height="40px" alt="mysite.com" /> 

 </a>
</div>

CSS для кнопки мыши (которая работает так, как я хочу, но добавлена ​​сюда для справки):

.btn {
    position relative;
    overflow: hidden;
    z-index: 1;
    top: 5px;
    width: 100px;
    height:40px;
}
.btn a { 
    display:block; 
    width:100px; 
    height:40px; 
    z-index: 100;
}
.btn a:hover { 
    background: url(btn_hover.png);
}

Буду очень признателен за некоторые советы или ссылки на примеры кодов.


javascript html jquery mouseover getelementbyid
person Johann de Vries    schedule 31.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вот.. с помощью jquery...

HTML

<div class="btn">
   <a href="http://www.previewed_site.com" target="_blank" >
     <img src="btn.png" width="100px" height="40px" alt="mysite.com" /> 
   </a>
</div>

с jquery вы можете использовать функцию mouseover для выбранного элемента. Документация jquery для селектора здесь

JQUERY

$(document).ready(function(){   //recommened you to use script inside document.ready always
$(".btn  a").mouseover(function(){  //selecting element with "<a>" tag inside an element of class "btn"
     $('#preview_text_content') .html('a short preview description here'); //getting an element with an id "preview_text_content" and repalcing its html with jquery html() ;
})

$(".btn  img").mouseover(function(){
  $('#preview_img_content').html('<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>'); //similar as above

});
});

ОБНОВЛЕНО

динамическая загрузка изображения и текста... с использованием атрибута данных

HTML

//first image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here">
   <img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview.jpg"/>
</a>
//second image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here 2">
   <img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview2.jpg"/>
</a>

JQUERY

$(document).ready(function(){   
  $(".btn  a").mouseover(function(){  
   $('#preview_text_content') .html($(this).data('text_content')); 
 })

$(".btn  img").mouseover(function(){ 
   var imgContent='<a href=\'http://www.previewed_site.com\'><img src=\''+$(this).data('img_content') +'\' /></a>';
   $('#preview_img_content').html(imgContent); 

 });
});

ИЛИ

вы всегда можете использовать функции, чтобы очистить свои коды и сделать их понятными.

HTML

<div class="btn">

 <a href="http://www.previewed_site.com" target="_blank" onmouseover="linkMouseoverFunction()">

  <img onmouseover="imgMouseoverFunction()" src="btn.png" width="100px" height="40px" alt="mysite.com" />

JAVASCRIPT

 function linkMouseoverFunction()
 {
    document.getElementById('preview_text_content').innerHTML = 'a short preview description here';
 }

function imgMouseoverFunction()
{
   document.getElementById('preview_img_content').innerHTML = '<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>';
}
person bipen    schedule 31.12.2012
comment
Спасибо за быстрый ответ, код ясен и понятен, я использовал jquery и удалил некоторые биты, чтобы linkMouseOverFunction применялась только к якорю, я также добавил идентификаторы к кнопкам div, чтобы я мог дать им отдельные тексты предварительного просмотра и изображения при наведении изображение для предварительного просмотра теперь также правильно связано, это была ошибка z-индекса CSS Любые указатели на то, как загрузить все изображения для предварительного просмотра и тексты из одного внешнего файла с помощью jquery? - person Johann de Vries; 31.12.2012
comment
Конечно: скажем, у меня есть 4 кнопки, каждая из которых должна отображать разные текст и изображение предварительного просмотра, могу ли я поместить все эти изображения и текст в отдельный файл, скажем, preview_contents.htm и получить переменные (?) из этого файла, поэтому я не нужно редактировать скрипт при обновлении превью текстов/изображений - person Johann de Vries; 31.12.2012
comment
обновленный ответ с использованием атрибутов данных HTML 5... посмотрите, это всего лишь пример того, как вы можете это сделать... дайте мне знать, если возникнут проблемы... - person bipen; 31.12.2012
comment
Не совсем то, что я имел в виду, но я уверен, что смогу использовать это с некоторыми изменениями, спасибо, ваши коды многому меня научили! - person Johann de Vries; 31.12.2012