Menu
Okay, I got the code below from another user on this forum, I was wondering if someone can help me customize this. I’m not too good at javascript any help would be MUCH appreciated.
Here’s what I need:
The way it works now is when you hover over a thumbnail it enlarges the same image, I want it to load a “specified” img to load rather than the thumbnail itself. I want each image to have its own title.
onmouseover=showImage(location=folder/large_img01.jpg, title=img_01)
I want the top left corner of the div table to be 15px down and 15px to the right of the cursor.
Also, I can’t figure out how to add text with the div box.
I want it to be like:
<div>
Title: Img 01
Dimension: 600×400
</div>
I will specify the image info per image.
Can anyone help me customize this?
[code]
<HTML><HEAD>
<META http-equiv=Content-Type content=”text/html; charset=windows-1252″>
<STYLE type=text/css>
.msgFloat
{
Position: Absolute;
Top: auto;
Left: auto;
Border-Style: Solid;
Border-Width: 1px;
Background-Color: #FFFFFF;
Padding-Right: 10px;
Padding-Left: 10px;
Padding-Top: 50px;
Padding-Bottom: 10px;
}
</style>
<SCRIPT type=text/javascript>
var floatWidth = 600;
var floatHeight = 400;
var midScreen = “100%”;
var nContainer = “”;
var IE = false;
if (navigator.appName == ‘Microsoft Internet Explorer’){IE = true}
function stayHome(m){
if (IE)
{
var currX = event.clientX;
var currY = event.clientY;
}
else {
var currX = m.pageX;
var currY = m.pageY;
}
if (!document.body.scrollTop)
{
var iL = document.documentElement.scrollLeft;
var iV = document.documentElement.scrollTop;
}
else {
var iL = document.body.scrollLeft;
var iV = document.body.scrollTop;
}
if (currX > midScreen-30)
{
var msgWidth = nContainer.clientWidth;
if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+’px’}
else {nContainer.style.left = (currX-msgWidth-10)+’px’}
}
else {
if (IE){nContainer.style.left = (currX+10+iL)+’px’}
else {nContainer.style.left = (currX+10)+’px’}
}
if (IE){nContainer.style.top = (currY+iV-(floatHeight/2))+’px’}
else {nContainer.style.top = currY-(floatHeight/2)+’px’}
}
document.onmousemove = stayHome;
function insertFloatMsg(){
nContainer = document.getElementById(‘isFloat’);
}
function hideImage(){
while (nContainer.lastChild)
{nContainer.removeChild(nContainer.lastChild)}
document.getElementById(‘isFloat’).style.display = ‘none’;
}
function showImage(isImg,currItem){
document.getElementById(‘isFloat’).style.display = ‘inline’;
nIMG = document.createElement(‘img’);
nContainer.appendChild(nIMG);
nIMG.setAttribute(‘src’,isImg);
nIMG.setAttribute(‘width’,floatWidth);
nIMG.setAttribute(‘height’,floatHeight);
currItem.onmouseout=hideImage;
}
function initFloatImg(){
insertFloatMsg();
hideImage();
if (!IE){document.captureEvents(Event.mousemove)}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV class=’msgFloat’ id=’isFloat’></DIV>
<TABLE align=center>
<TBODY>
<TR>
<TD height=300><IMG onmouseover=showImage(this.src,this) height=45 src=””
width=60> </TD></TR>
<TR>
<TD height=300><IMG onmouseover=showImage(this.src,this) height=45 src=””
width=60> </TD></TR></TBODY></TABLE><!– Keep the following line as the last line in the Body –>
<SCRIPT type=text/javascript> initFloatImg() </SCRIPT>
</BODY></HTML>