By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,962 Members | 1,967 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,962 IT Pros & Developers. It's quick & easy.

Problem to load the background in a layer

P: n/a
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>
<!--C.Candas, 2004.-->

<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
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Christophe Candas wrote:
<snip>
function position(e) { <snip> document.getElementById('zoom').style.background=" url <snip> }

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

</SCRIPT> <snip> <BODY BGCOLOR="#FFFFFF"> <snip> <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.
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.