0

我正在尝试使用带有链接的按钮图像更改两个（预览）div元素。mouseover

其中一个预览 div 将显示一张图片，我希望将其链接到特定网站

button-imagemouseover在 CSS 中也有一个函数类。

我可能会补充说，将有多个图像来使用这个函数，每个图像都有一个自己的 div 和一个类，我认为这在语义上不正确，因为它应该在使用排序列表时（但我稍后会担心）

另外我想补充一下，我是脚本新手，但渴望学习。

on mouseoutorclick不重要，当前（预览）内容可能保持与 last 一样mouseover。

目前，预览 div 内容的更改是通过将 document.getElementById 添加到锚点并将 img 分别添加到每个按钮，如以下混乱代码中所述，但我正在寻找一种更简洁的方法，例如使用 javascript 或 jquery 并使用 vars 和使预览图像可点击并链接到预览站点 [编辑：]此代码确实可以使预览图像成为链接[/编辑]

如果我可以从外部文件加载每个预览图像和文本，那就太好了

<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>

btn mouseover 的 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);
}

一些建议或一些示例代码的链接将不胜感激

4

1 回答 1

0

给你..使用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，您可以在选定元素上使用鼠标悬停功能。选择器的 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

});
});

更新

动态加载图像 n 文本...使用数据属性

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>

查询

$(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>';
}
于 2012-12-31T07:30:39.127 回答