Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Exact position of images
- Thread starter bentleykf
- Start date
Try this code. This should help.
<html>
<head>
<script><!--
/*
CREATED BY: Brian Gaines
PURPOSE: This javascripts determines a browser's ability to perform DHTML by feature sensing
a browser and setting appropriate variables representing the cababilities. Also, if the browser
does support DHMTL, a function called findDOM is created to locate the DOM to manipulate property
values of an object.
*/
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;
if (document.getElementById) {
isID = 1; idDHTML = 1; //W3C ID DOM
} else {
if (document.all) {
isAll = 1; isDHTML = 1; //IE DOM
} else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
isLayers = 1; isDHMTL = 1; //Netscape DOM
}
}
}
/*
CREATED BY: Brian Gaines
PURPOSE: Function locates the DOM of an object.
USAGE: Pass in the object ID of the container along with a 0 or 1 to represent whether to get a style of the container.
*/
function findDOM(objectID,withStyle) {
if (withStyle == 1) {
if (isID) { //W3C DOM
return (document.getElementById(objectID).style);
} else {
if (isAll) { //IE DOM
return (document.all[objectID].style);
} else {
if (isLayers) { //Netscape DOM
return (document.layers[objectID]);
}
}
}
} else {
if (isID) {
return (document.getElementById(objectID));
} else {
if (isAll) {
return (document.all[objectID]);
} else {
if (isLayers) {
return (document.layers[objectID]);
}
}
}
}
}
function findLeft(objectID) {
var domStyle = findDOM(objectID,1);
var dom = findDOM(objectID,0);
if (domStyle.left)
return domStyle.left;
if (domStyle.pixelLeft)
return domStyle.pixelLeft;
if (dom.offsetLeft)
return dom.offsetLeft;
return (null);
}
function findTop(objectID) {
var domStyle = findDOM(objectID,1);
var dom = findDOM(objectID,0);
if (domStyle.top)
return domStyle.top;
if (domStyle.pixelTop)
return domStyle.pixelTop;
if (dom.offsetTop)
return dom.offsetTop;
return (null);
}
// -->
</script>
<style media="screen" type="text/css">
<!--
#object1 {
position: absolute;
left: 100px;
top: 50px;
width: 410px;
border: 2px gray solid;
visibility: visible }
-->
</style>
</head>
<body>
<script>
function showPos(objectID) {
leftPos = findLeft(objectID);
topPos = findTop(objectID);
alert('Left: ' + leftPos + 'px; Top: ' + topPos + 'px' );
}
</script>
Click image to find Left and Top Position on the screen!
<p/>
<div id="object1">
<a href="#" onClick="showPos('object1')">
<img src="myImage.gif" width="250" height="250" border="0">
</a>
</div>
</body>
</html> regards,
Brian
<html>
<head>
<script><!--
/*
CREATED BY: Brian Gaines
PURPOSE: This javascripts determines a browser's ability to perform DHTML by feature sensing
a browser and setting appropriate variables representing the cababilities. Also, if the browser
does support DHMTL, a function called findDOM is created to locate the DOM to manipulate property
values of an object.
*/
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;
if (document.getElementById) {
isID = 1; idDHTML = 1; //W3C ID DOM
} else {
if (document.all) {
isAll = 1; isDHTML = 1; //IE DOM
} else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
isLayers = 1; isDHMTL = 1; //Netscape DOM
}
}
}
/*
CREATED BY: Brian Gaines
PURPOSE: Function locates the DOM of an object.
USAGE: Pass in the object ID of the container along with a 0 or 1 to represent whether to get a style of the container.
*/
function findDOM(objectID,withStyle) {
if (withStyle == 1) {
if (isID) { //W3C DOM
return (document.getElementById(objectID).style);
} else {
if (isAll) { //IE DOM
return (document.all[objectID].style);
} else {
if (isLayers) { //Netscape DOM
return (document.layers[objectID]);
}
}
}
} else {
if (isID) {
return (document.getElementById(objectID));
} else {
if (isAll) {
return (document.all[objectID]);
} else {
if (isLayers) {
return (document.layers[objectID]);
}
}
}
}
}
function findLeft(objectID) {
var domStyle = findDOM(objectID,1);
var dom = findDOM(objectID,0);
if (domStyle.left)
return domStyle.left;
if (domStyle.pixelLeft)
return domStyle.pixelLeft;
if (dom.offsetLeft)
return dom.offsetLeft;
return (null);
}
function findTop(objectID) {
var domStyle = findDOM(objectID,1);
var dom = findDOM(objectID,0);
if (domStyle.top)
return domStyle.top;
if (domStyle.pixelTop)
return domStyle.pixelTop;
if (dom.offsetTop)
return dom.offsetTop;
return (null);
}
// -->
</script>
<style media="screen" type="text/css">
<!--
#object1 {
position: absolute;
left: 100px;
top: 50px;
width: 410px;
border: 2px gray solid;
visibility: visible }
-->
</style>
</head>
<body>
<script>
function showPos(objectID) {
leftPos = findLeft(objectID);
topPos = findTop(objectID);
alert('Left: ' + leftPos + 'px; Top: ' + topPos + 'px' );
}
</script>
Click image to find Left and Top Position on the screen!
<p/>
<div id="object1">
<a href="#" onClick="showPos('object1')">
<img src="myImage.gif" width="250" height="250" border="0">
</a>
</div>
</body>
</html> regards,
Brian
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question