It would be nice to have a bit more html code. I'll assume the following:
HTML Code:
<div class ="file">
<img id ="logo" src ="logoFile.jpg" alt ="">
<span id ="bubble">
size: 2MB <br />
Duration: 02:05<br />
etc: info
</ span>
</ div>
at the CSS, we'll put the info bubble just below the image, and hide it.
HTML Code:
.file {
position: relative;
}
.file span {
position: absolute;
display: none;
/** has to change depending on how you want **/
width: 200px;
top: 80px;
left: 40px;
padding: 5px;
background: #eeffce;
/*****/
}
with javascript you will see on the screen the info bubble when it passes over the image
HTML Code:
var img = window.document.getElementById('logo');
var span = window.document.getElementById('bubble');
img.onmouseover = function(){
span.style.display = "block";
}
img.onmouseout = function(){
span.style.display = "none";
}
Bookmarks