I am looking for a javascript or IE function
that will enlarge the size of an image
when the mouse is rolled over and then
reduce it back to normal size after the mouse
leaves the image....
What i am looking for is a
lookalike to the macintosh action bar (or whatever it is called)
I know i can make the rollover image a different size than
the original normal image, but the table gets all out of whack
when i do a rollover...
I have seen this type of effect done with Flash but not with JavaScript. I'd be interested to see as well if someone can come up with a way to do this in JS.
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.
<IMG ID="image1" SRC="whatever">
Anywhere inside the body create a hidden image with absolute positioning, e.g.
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. Hope this helped!
Code:
<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[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].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 {left:offsetLeft, top:offsetTop};
}
// 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"><IMG ID="image1" SRC="backup.gif" onmouseover="ShowRollover()"></TD>
<TD WIDTH="200">CELL 3</TD>
</TR>
</TABLE>
</CENTER>
<DIV ID="rollover" STYLE="position:absolute; visibility:hidden">
<img src="beige035.gif" onmouseout="hide('rollover')" onclick="alert('You clicked me!')">
</DIV>
</BODY>
</HTML>
Linear Mode
