Problem to load the background in a layer

Christophe Candas · Jan 30, 2005

Hye,

You will find here under a script which will load a picture in a layer ,
picture depending on the cursor position. Everything's ok until the line:
document.getElementById('zoom').style.background="url('chemin
image.gif')";
which doesn't work.
The script works (indication in the status barre) but the image is not
loaded in the layer...
I'm quiet sure it's a problem of url syntaxe but I can't find it ???

<script language="JavaScript" type="text/JavaScript">
nom_precedent = "/images/panorama_1.gif";

function position(e) {
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX :
event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY :
event.y+document.body.scrollTop;

posx = Math.ceil(x/1014*21);
posy = Math.ceil(y/290*12)-1;

if (posx<=1) posx=1;
if (posx>=21) posx=21;
if (posy<=0) posy=0;
if (posy>=7) posy=11;

num = posx+(posy*21);
nom = "../../../../_images/_trainers_050124/images/panorama_"+num+".gif";

if (nom != nom_precedent) {

window.status = "Souris posx:"+posx+" | posy:"+posy+" | numéro:"+num+" |
image:"+nom;

// Netscape
if (document.getElementById){
document.getElementById('zoom').style.background="url('../../../../_images/_trainers_050124/images/panorama_51.gif')";
}

if (document.all && !document.getElementById){
document.all['zoom'].style.background="url('../../../../_images/_trainers_050124/images/panorama_51.gif')";
}

// IE
if (document.layers) {
document.layers['zoom'].style.background="url('../../../../_images/_trainers_050124/images/panorama_51.gif')";
}

nom_precedent = nom;
}
}

if (navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;

</SCRIPT>

</HEAD>


<BODY BGCOLOR="#FFFFFF">
<img src="../../../../_images/_trainers_050124/panorama_flat.jpg"
width="1014" height="290" border="0">
<p align="center" class="retrait">Glissez la souris sur la zone de l'image
que vous souhaitez agrandir ci dessous.</p>
<div id="zoom" style="position:absolute; width:500px; height:250px;
z-index:1; visibility: visible; left: 257px; top: 346px; background-image:
url(../../../../_images/_trainers_050124/images/panorama_54.gif);
layer-background-image:
url(../../../../_images/_trainers_050124/images/panorama_54.gif); border:
1px none #000000;"></div>

Thanks in advance for your help.

Christophe

Richard Cornford · Jan 30, 2005

Christophe Candas wrote:

function position(e) {

document.getElementById('zoom').style.background="url

}

if (navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;

</SCRIPT>

<BODY BGCOLOR="#FFFFFF">

<div id="zoom" style="position:absolute; width:500px; ...

<snip>

Because you assign the - position - function as a mosemove handler
inline, before the page body (and particularly the <DIV ID="zoom">
element) has been parsed by the browser, if there is a mosemove event in
the interval between the assignment of the handler and the creation of
the DIV element in the DOM then the - document.getElementById('zoom') -
method call will return - null -, and the rest of that expression will
result in an exception being thrown.

Richard.

mm_menu.js delay showing a different layer onmouseout	1	Apr 14, 2005
Help With a Script	5	Jul 10, 2021
problem with arrays, trying to dynamicly change the background of tabs	4	Aug 30, 2007
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
problemas para mostrar div segun navegador onmousemove onmouseout	0	Nov 11, 2008
Help with my responsive home page	2	Dec 14, 2022
problem positioning of a background image in a DIV	0	Nov 6, 2008

Problem to load the background in a layer

Christophe Candas

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads