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

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
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 :
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY :

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+" |

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

if (document.all && !document.getElementById){

// IE
if (document.layers) {

nom_precedent = nom;

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


<!--C.Candas, 2004.-->

<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); border:
1px none #000000;"></div>

Thanks in advance for your help.
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply

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

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

</SCRIPT> <snip> <BODY BGCOLOR="#FFFFFF"> <snip> <div id="zoom" style="position:absolute; width:500px; ...


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.

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.