Here's a scrpit for T.E users...use this script in ur blogs or websites if u want to
enlarge a image when rolled over.
This solution uses absolute positioning of the rollover image because absolute positioning places the element outside of the usual formatting rules, and so won't screw up your table design.
Make sure your table is fixed (so no surprises if browser window changes size)
Give your initial image an id, e.g.
Anywhere inside the body create a hidden image with absolute positioning, e.g.
<DIV ID="image2" STYLE="position:absolute; visibility:hidden">
</DIV>
On the initial image onmouseover event, point to a JS routine to reposition the hidden, enlarged image to the exact same position as the initial image and then show the enlarged image. On the onmouseout or onblur event of the rollover image, hide the rollover image....
Complete, working example with cross-browser functionality is shown below.
Source
enlarge a image when rolled over.
This solution uses absolute positioning of the rollover image because absolute positioning places the element outside of the usual formatting rules, and so won't screw up your table design.
Make sure your table is fixed (so no surprises if browser window changes size)
Give your initial image an id, e.g.
Anywhere inside the body create a hidden image with absolute positioning, e.g.
<DIV ID="image2" STYLE="position:absolute; visibility:hidden">
On the initial image onmouseover event, point to a JS routine to reposition the hidden, enlarged image to the exact same position as the initial image and then show the enlarged image. On the onmouseout or onblur event of the rollover image, hide the rollover image....
Complete, working example with cross-browser functionality is shown below.
<html>
<head>
<title>Rollover Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script LANGUAGE="javascript">
<!--
// Global variables
var isCSS, isW3C, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
}
}
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers.name == name) {
theObj = doc.layers;
break;
}
// dive into nested layers if necessary
if (doc.layers.document.layers.length > 0) {
theObj = seekLayer(document.layers.document, name);
}
}
return theObj;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0;
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
// read position of an element in regular document flow
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {leftffsetLeft, top
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
//Show the rollover image
function ShowRollover()
{
var position = getElementPosition("image1");
// alert("X:"+x+" Y:"+y);
shiftTo("rollover", position.left, position.top);
show("rollover");
}
//-->
</SCRIPT>
</head>
<BODY BACKGROUND="layout_img/backmain.gif" onload="initDHTMLAPI()">
<CENTER>
<TABLE WIDTH="600" border="1">
<TR>
<TD WIDTH="200">CELL 1</TD>
<TD WIDTH="200"></TD>
<TD WIDTH="200">CELL 3</TD>
</TR>
</TABLE>
</CENTER>
<DIV ID="rollover" STYLE="position:absolute; visibility:hidden">
</DIV>
</BODY>
</HTML>
Source
Look here: