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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Get image position while the page is loading.

Status
Not open for further replies.

cherphas

Programmer
Jun 5, 2002
24
CA
Hello,

I've got a script to get the XY coordinates of an images. The problem is it's a function, and it will only execute if the user activates the function, right? I want to get the position of the image while the page loads, so I can add a CSS layer(Popup menu) at that position. Is this possible without the use of function? or is it possible to execture the function while loading. I'm not even sure how I would call the function, and how does the function know which image to check? Here is the script:

function getXYcoord ( nvn ) {
var elm = document.images[nvn];
if ( document.layers ) return elm;
// NS4 images contain x and y values
var rd = { x:0 ,y:0 };
do { rd.x += parseInt( elm.offsetLeft );
rd.y += parseInt( elm.offsetTop );
elm = elm.offsetParent;
} while ( elm );
return rd
}; //end getXYcoord ( string ) -> object{x,y}

var pos = getXYcoord( 'imagename' );
alert( "image x,y coords are" +pos.x +"," +pos.y );
 
I'm not sure about all of your code, but I believe you just need on onLoad event handler...



<body onLoad=&quot;getXYcoord(0)&quot;> Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com
 
thanks mwolf00! One more question: How does the function know which image to process? Should I call the &quot;onLoad&quot; in the <img> tag?
 
Lookd like you're using an array of the images on the page.
var elm = document.images[nvn];
Where nvn is the index. I haven't use this array, but you're looking at the 0 index or the first image on the page. Your code could fail if there are no images on the page. My guess is that the array is loaded in the order that the code loads the images.

If you paste this code into your address bar and hit return, you'll see that there are about 129 images on this page:

javascript: alert(document.images.length)

I'm guessing that the image is an object with the following properties:
height
name
width
src

You could loop though them like this:

for (x=0; x<document.images.length; x++){
alert(&quot;pic #&quot; + x + &quot; source is &quot; + document.images[x].src)
} Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com
 
hmmm, i'm not sure what you mean. I think I should explain myself better:

What I want to do is generate a side menu from a database. I want each Link in the menu to have a pop up menu(CSS layer), and the content of this popup menu would be database driven also. To position the popup menu to their respected links, I though I would place a transparent gif beside each link, get its position and place the layer at that position. So I figured the logic would go like this:

PHP script-------

Connection Strings

SELECT Titles FROM table1
WHILE loop to display title
<td>
display title
</td>
<td>
transparen gif, 1 x1 pixel(I want to position the Popup menu here, so I would need its position at this point)
</td>
Create layer at position of gif
SELECT Subtitles which matches with current title from table2
While loop to display all Sub-titles in popup menu
display subtitles
loop
loop to display next titles

------------------------------------------------------------

Does this make any sense? The function i showed you I got it on the net. Maybe there is a better one? All I need is when the loop is executed, the transparent gif is displayed, then get the size of this .gif, diplay layer, loop again and so on...
 
I'd suggest that you give each picture a unique name (perhaps = title) and then use the onLoad event handler for the page to loop though all pictures on the page an look for the names. Another possibility is that images themselves have on onLoad() event handler. Perhaps you can fire your function onLoad for each image.

Another option would be something like...

while not EOF
write title class=&quot;title&quot;
write div for submenu id=titleVal class=&quot;subHidden&quot;
write submenu
end div
loop

make the style for subHidden = display:none
onMouseOver change the style to display: inline
onMouseOut if mouse isn't over div then display:none again Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top