Image's position absolute, relative to other object that is -Possible?

[gxpark]

Hi,

Is it possible to place an image on the screen relative to the position of another image? Something like this:

<img id=&quot;imgRel&quot; src=&quot;someimage&quot;>
<img id=&quot;imgAbs&quot; src=&quot;otherimage&quot; style=&quot;position: absolute; visibility: hidden&quot;>

<script language=&quot;javascript&quot; for=&quot;imgRel&quot; event=&quot;onmouseover&quot;>
x = document.getElementById(&quot;imgAbs&quot;
x.left =
document.getElementById(&quot;imgRel&quot.left + 10;
x.style.visibility = &quot;visible&quot;;
</script>

Get the idea? Of course that my poor example does not work... It doesn't work either if I use &quot;.style.left&quot; instead of just &quot;.left&quot;....

I'm hoping there's a way to do this without making &quot;imgRel&quot;'s position absolute.

Thanks.

Ivan V.

 

[RISTMO]

Try this:

document.images[&quot;imgRel&quot;].style.left += 10;

You will have to specify either position:relative; or position:absolute; because if you don't, the browser won't know if you want it 10px from 0,0 or from wherever it is currently.

Rick

 

[gxpark]

That's not exactly what I want. Your method just moves the image relative to its OWN position, I want to move it relative to other image's position.

Thanks.

 

[RISTMO]

If imgRel's left is set, you can do this:

<img id=&quot;imgRel&quot; src=&quot;someimage&quot; style=&quot;position:relative;&quot;>
<img id=&quot;imgAbs&quot; src=&quot;otherimage&quot; style=&quot;position:absolute;visibility:hidden&quot;>

<script language=&quot;javascript&quot; for=&quot;imgRel&quot; event=&quot;onmouseover&quot;>
<!--//hide from old browsers
document.getElementById(&quot;imgRel&quot.style.left=document.getElementById(&quot;imgAbs&quot.style.left+10;
document.getElementById(&quot;imgAbs&quot.style.visibility=&quot;visible&quot;;
//show again to old browsers-->
</script>

Rick

 

[gxpark]

That's exactly the problem... imgRel left attribute is not set, and that's the whole point. I hoped there was a way to know where exactly is the browser rendering the stuff.

 

[RISTMO]

Why don't you just set it in the same function, like this:

<img id=&quot;imgRel&quot; src=&quot;someimage&quot;>
<img id=&quot;imgAbs&quot; src=&quot;otherimage&quot; style=&quot;position:absolute;visibility:hidden&quot;>

<script language=&quot;javascript&quot; for=&quot;imgRel&quot; event=&quot;onmouseover&quot;>
<!--//hide from old browsers
document.getElementById(&quot;imgRel&quot.style.position='relative';
document.getElementById(&quot;imgRel&quot.style.left=document.getElementById(&quot;imgAbs&quot.style.left+10;
document.getElementById(&quot;imgAbs&quot.style.visibility=&quot;visible&quot;;
//show again to old browsers-->
</script>

Rick

 

[gxpark]

It has to be the other way around. I don't want to move imgRel's position at all, I want to move imgAbs.

Currently I don't think it can be done as I've tried countless ways, and none works. It appears the browser doesn't expose the coords where it renders stuff (well, it does as long as you use absolute/relative CSS positions, which I don't).

Thanks.

 

[starway]

I don't understand what's the problem here, and why are you stucked with complex DOM/JS games.
The nature of html ia that everything is relative - well, it was like before &quot;position&quot; manipulations were added.

Just place one image next to another, and that'll do what you want:

<img id=&quot;imgRel&quot; src=&quot;someimage&quot;>
<img id=&quot;imgAbs&quot; src=&quot;otherimage&quot; hspace=&quot;10&quot;>

(by the way, I hope you didn't forget to add width/height attributes to <img> tag? The same about alt=&quot;&quot;)

Of course, it's not always suitable. I just want to point that you should first try simple solutions and not to go a hard way.

 

[Tarwn]

Gxpark, your correct. When the browser places the elements it does not set the CSS properties for left and top. Setting absolute locations with left and top only override the browsers natural flow (or relative) layout.
One additional problem you may face is that with some browsers the left or top attribute will return the x or y coordinate with &quot;px&quot; appended to it. This makes math less than fun unless you resort to using pixelLeft and pixelTop.

If you want the images side-by-side I would suggest going with starways method above and simply set a margin-left on the right image to space it out from the left image. If your having the problem of the imaghes not wanting to display side-by-side try using a table or the CSS float attribute.

-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation

 

[gxpark]

It appears as of now it's impossible to do what I want (maybe another method...)

In short, I have a map of a city where users can select a deputation, and I wanted that when the mouse was over a recognized area, that area would be highlighted by showing an image on top of the map. The map must flow with the layout of the page, so I can't set its position explicitly, and hence the problem.

Thanks anyway

 

[RISTMO]

Try something similar to the script below (it is not complete. You must pass in the mouse coordinates, make the arrays, etc):
for(i=0;i<x_arr.length;i++){
if((the_x_coordinate>x_arr) && (the_x_coordinate<x_arr+1)){
if((the_x_coordinate>x_arr) && (the_x_coordinate<x_arr+1)){
document.getElementById(&quot;imgAbs&quot.style.left=x_arr;
document.getElementById(&quot;imgAbs&quot.style.top=y_arr;
}
}
}

That can be in a function called on mouse over the image. remember to set the position style if it isn't already.

Rick

 

[gxpark]

That looks rather complicated, and if I read it right, it would move the image along with the mouse cursor, right? And that still doesn't solve the problem on the relative position of the map. Still, I think you gave me an idea to try to solve it, but I've decided to drop that &quot;cool&quot; behavior

Regards,
Ivan

 

[RISTMO]

It would not follow the mouse. you would have the set of x and y coordinates in two arrays. you would use the mouse coordinates only to see wich section it falls under.

good luck!

Rick

 

[starway]

gxpark, be simple!
What you're talking about it just a simple good old image rollover! No need in any positioning, coordinates, styles or any other rubbish.
All you do is just change the .src of the city image:
[tt]document.images['city_img'].src = &quot;other.gif&quot;[/tt]

Create an image map with all necessary regions, then add the string I just wrote for each [tt]onmouseover[/tt] and [tt]onmouseout[/tt] state.
You can do it as a function call (like any good rollover script), and add preloaders for all necessary images:
[tt]img1 = new Image();
img1.src = &quot;map1.gif&quot;
. . .[/tt]

That's all, you don't need anything more than that!

The same story is for placing the map - I'm sure that you are overcomplicating the case.

 

[gxpark]

starway, I already thought of that, but that would mean I'd have to reload a very huge image on each mouse over... because I can't just replace part of the image, so I have to load the image of the map with the proper section highlighted.

ritstmo, I can't see how that would work, as I'll still won't know the position of the map on the page, which is what I need to position the other images. And since the position changes dynamically according to the user's settings (font size, etc.), I need the browser to tell me where the heck is that image Or maybe, am I missing something?

regards,
Ivan V.

 

[starway]

If yuo want to mouse over a recognized area, and make that area highlighted, you'll need to swap images anyway, no matter what way you'd go. Isn't it?

Anyway, I posted once a set of functions that determine objects position on a page. I can't find it now so I'll do it again. Maybe it will help you.
[tt]
function elemHeight(elemName) {

if (document.layers)
h = eval(&quot;document.layers[&quot; + elemName + &quot;].document.height&quot

//else if (document.all)
// h = eval(&quot;document.all['&quot; + elemName + &quot;'].offsetHeight&quot

else if (document.getElementById)
h = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetHeight&quot

return(h);
}

function elemWidth(elemName) {

if (document.layers)
w = eval(&quot;document.layers[&quot; + elemName + &quot;].document.width&quot

else if (document.getElementById)
w = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetWidth&quot

return(w);
}


function elemTop(elemName) {

if (document.layers)
t = eval(&quot;document.layers[&quot; + elemName + &quot;].document.pageY&quot

else if (document.getElementById)
t = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetTop&quot

return(t);
}


function elemLeft(elemName) {

if (document.layers)
l = eval(&quot;document.layers[&quot; + elemName + &quot;].document.pageX&quot

else if (document.getElementById)
l = eval(&quot;document.getElementById('&quot; + elemName + &quot;').offsetLeft&quot

return(l);
}


function elemProps(elemName) {

w = &quot;width= &quot; + elemWidth(elemName);
h = &quot;height= &quot; + elemHeight(elemName);
t = &quot;top= &quot; + elemTop(elemName);
l = &quot;left= &quot; + elemLeft(elemName);

dims = &quot;element name: &quot; + elemName + &quot;\n\n&quot; + w + &quot;; &quot; + h + &quot;\n&quot; + t + &quot;; &quot; + l ;

return(dims)
}
[/tt]
You should add an ID to the element you want to access:
<p id=&quot;second&quot; onClick=&quot;alert(elemProps('second'))&quot;> some comtent</p>

Note that it's not so easy to make it work in NN4.