Question

I’m trying to change two (preview) div elements with mouseover on a button-image with a link.

One of the preview-divs will show an image, which I would like to have linked to a specific site

The button-image also has a mouseover function class in CSS.

I might add that there will be multiple images to use this function, each spaced with an own div and a class, which i believe isn’t semantically correct as it should be when using an usorted list (but that i will worry about later)

Also I’d like to add I’m new to scripting but eager to learn.

On mouseout or click is not important, the current (preview) contents may remain as on last mouseover.

Currently the changing of the preview divs content works by adding document.getElementById to the anchor and the img separately to each button as stated in the following messy code , but i am looking for a cleaner approach like something with javascript or jquery and using vars and making the preview image clickable and linked to the previewed site
[EDIT:]This code DOES work for making the preview image a link[/EDIT]

It would be really great if i could load each preview image and text from an external file

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

The CSS for the btn mouseover (which works like i want but added here for reference):

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

Some words of advice or some links to example codes would be greatly appreciated

Answer 1

here you go..using 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>

with jquery, you can use mouseover function on a selected element..jquery documentation for selector is here

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

});
});

---

UPDATED

dynamic loading image n text…using data attribute

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

 });
});

---

OR

you can always use functions to clear your codes and making it understandable..

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