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

DHTML moving an image

P: 8
Hello everyone. If anyone can give me a hand I would be gratefull

Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover the arrows the gallery div moves to left and right.

I have changed the script and now the image does move five pixel one way and then stops. The TimeOut does not seem to be working or something is stopping the function from running.

Here it is

<html>
<head>
<title>observationist</title>
<script type="text/javascript">

var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}

function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}


function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('swap').src = whichpic.href;
return false;
} else {
return true;
}

}


function moving(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left-=5
moveid=setTimeout("moving()",50)
}
function stop(){
clearTimeout(moveid)

}

function moving2(id){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left+=5
moveid2=setTimeout("moving2()",50)
}
function stop2(){
clearTimeout(moveid2)

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="obtotalcss.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="bstrip" onMouseOver="show('placeholder'),hide('gallery'),h ide('bio'),hide('kamera')" onMouseOut="hide('placeholder'),show('gallery')"></div>

<div class="topbar" onMouseOver="show('placeholder'),hide('gallery'),h ide('bio'),hide('kamera')" onMouseOut="hide('placeholder'),show('gallery')">

<div class="gallery" id="slider" > <img src="images/space.jpg" style="border: solid 0px; visibility:hidden;">
<a href="http://observationist.co.uk/images/mane-1.jpg" onclick="return showPic(this)"><img src="images/mane-1-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-2.jpg" onclick="return showPic(this)"><img src="images/mane-2-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-3.jpg" onclick="return showPic(this)"><img src="images/mane-3-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-4.jpg" onclick="return showPic(this)"><img src="images/mane-4-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-5.jpg" onclick="return showPic(this)"><img src="images/mane-5-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-6.jpg" onclick="return showPic(this)"><img src="images/mane-6-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-7.jpg" onclick="return showPic(this)"><img src="images/mane-7-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-8.jpg" onclick="return showPic(this)"><img src="images/mane-8-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-9.jpg" onclick="return showPic(this)"><img src="images/mane-9-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/ponies.jpg" onclick="return showPic(this)"><img src="thumb/ponies.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/snowman.jpg" onclick="return showPic(this)"><img src="thumb/snowman.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/cream-tea.jpg" onclick="return showPic(this)"><img src="thumb/cream-tea.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/masks.jpg" onclick="return showPic(this)"><img src="thumb/masks.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/turrets.jpg" onclick="return showPic(this)"><img src="thumb/turrets.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/wetleaves.jpg" onclick="return showPic(this)"><img src="thumb/wetleaves.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/innerplant.jpg" onclick="return showPic(this)"><img src="thumb/innerplant.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/beachflower.jpg" onclick="return showPic(this)"><img src="thumb/beachflower.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/elephantgod.jpg" onclick="return showPic(this)"><img src="thumb/elephantgod.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/lookather.jpg" onclick="return showPic(this)"><img src="thumb/lookather.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/templeflowers.jpg" onclick="return showPic(this)"><img src="thumb/templeflowers.jpg" border="0" ></a>
</div>

</div>



<div class="botbarl" >
<img src="images/logo5.jpg" style="border:solid 0px ;">
<br><br><br>
<a href="#" onClick="show('bio'), hide('kamera'), hide('gallery'),hide('placeholder')" >biography</a> <br>
<a href="#" onClick="show('kamera'), hide('bio'),hide('gallery') ,hide('placeholder')" >exhibitions</a> <br>
<a href="mailto:keith@keithdavey.wanadoo.co.uk" >contact</a><br>
</div>

<div class="screen" id="placeholder" style="visibility:visible; vertical-align: middle; border:0px;">
<img src="images/kdavey.jpg" style="vertical-align: middle; border:solid #aaaaaa 10px;" id="swap">
</div>


<div class="screen" id="gallery" style="background-image:url(images/kdavey.jpg); background-repeat: no-repeat; border:solid 10px #aaaaaa;" >
<p class="gallerytext">To scroll through the thumbnail pictures place your mouse
over the arrows, or use the scrollbar at the bottom of the screen. <br>
<br>
Click on the thumnail to see a larger version of the image. Keep your mouse
over the chosen image, until veiwed. </p>
</div>

<div class="screen" id="bio" style="background-image: url(images/portrait.jpg);background-repeat: no-repeat;" >
<p class="biotext"> Keith was part of The Pimlico Arts and Media Scheme. His
work is shown in galleries and art spaces throughout London. He is a contributor
to TimeOut, and his work is regularly published in QXmagazine. His imagery
is frequently used by London based clubwear manufacturer 'Regulation' in many
of their major advertising campaigns. </p>
</div>

<div class="screen" id="kamera" style="background-image: url(images/exhibitions-2.jpg);background-repeat: no-repeat;" >
<p class="extext"> <span style="color:000000; font-size:15px">'Shop Girls'<br>
The Box throughout July 2006<br>
32-34 Monmouth Street, Seven Dials, Covent Garden</span><br>
<a style="color:000000; font-size:15px" href="http://maps.google.com/maps?q=WWW.BOXBAR.COM+None.&sll=51.513804,-0.127491&spn=0.009197,0.019834&sspn=0.009681,0.020 878&num=1&start=0&hl=en">
map</a> <br>
<br>
'Shop Girls'<br>
The Blue Room May 2005 ~ June 2005<br>
3, Bateman st. Soho London<br>
<br>
'Shop Girls'<br>
The Green March 2005 ~ April 2005<br>
74, Upper st. Islington London N1<br>
<br>
'Leche-Vitrines'<br>
Freedom Soho Dec 2004 ~ Feb.2005<br>
66, Wardour st. London W1F 0TA<br>
<br>
</p>
</div>

<div class="arr" onMouseOut="stop()" onMouseOver="moving(),show('placeholder'),hide('ga llery'),hide('bio'),hide('kamera')" >
<img src="images/rightarrow.gif" >
</div>

<div class="arl" onMouseOut="stop2()" onMouseOver="moving2(),show('placeholder'),hide('g allery'),hide('bio'),hide('kamera')" >
<img src="images/leftarrow.gif">
</div>


</body>
</html>
Sep 6 '07 #1
Share this Question
Share on Google+
10 Replies


epots9
Expert 100+
P: 1,351
i was able to get it working in firefox, you have mixed up your semi-colons with commas.

yours:
[html]
<div class="topbar" onMouseOver="show('placeholder'),hide('gallery'),h ide('bio'),hide('kamera')" onMouseOut="hide('placeholder'),show('gallery')">
[/html]

should be:
[html]
<div class="topbar" onMouseOver="show('placeholder');hide('gallery');h ide('bio');hide('kamera');" onMouseOut="hide('placeholder');show('gallery');">
[/html]

you have to change all of them and your code will work.

good luck
Sep 6 '07 #2

P: 8
Hey thanks for a quick response.

I tried swapping over the commas for the colons but doesnt do anything.. Maybe you have a different version of firefox ?? Or maybe I have done something to the JS in the meantime. Could I trouble you to take a second look and maybe past me what you have which works in firefox. I was hoping you were right and it was a simple solution, but has not made any difference.

Thanks Chris
x


<html>
<head>
<title>observationist</title>
<script type="text/javascript">

var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}

function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}


function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('swap').src = whichpic.href;
return false;
} else {
return true;
}

}


function moving(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left-=5
moveid=setTimeout("moving()",50)
}

function stop(){
clearTimeout(moveid)

}

function moving2(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left+=5
moveid2=setTimeout("moving2()",50)
}
function stop2(){
clearTimeout(moveid2)

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="obtotalcss.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="bstrip" onMouseOver="show('placeholder');hide('gallery');h ide('bio');hide('kamera')" onMouseOut="hide('placeholder');show('gallery')"></div>

<div class="topbar" onMouseOver="show('placeholder');hide('gallery');h ide('bio');hide('kamera')" onMouseOut="hide('placeholder');show('gallery')">

<div class="gallery" id="slider" > <img src="images/space.jpg" style="border: solid 0px; visibility:hidden;">
<a href="http://observationist.co.uk/images/mane-1.jpg" onclick="return showPic(this)"><img src="images/mane-1-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-2.jpg" onclick="return showPic(this)"><img src="images/mane-2-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-3.jpg" onclick="return showPic(this)"><img src="images/mane-3-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-4.jpg" onclick="return showPic(this)"><img src="images/mane-4-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-5.jpg" onclick="return showPic(this)"><img src="images/mane-5-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-6.jpg" onclick="return showPic(this)"><img src="images/mane-6-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-7.jpg" onclick="return showPic(this)"><img src="images/mane-7-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-8.jpg" onclick="return showPic(this)"><img src="images/mane-8-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-9.jpg" onclick="return showPic(this)"><img src="images/mane-9-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/ponies.jpg" onclick="return showPic(this)"><img src="thumb/ponies.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/snowman.jpg" onclick="return showPic(this)"><img src="thumb/snowman.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/cream-tea.jpg" onclick="return showPic(this)"><img src="thumb/cream-tea.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/masks.jpg" onclick="return showPic(this)"><img src="thumb/masks.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/turrets.jpg" onclick="return showPic(this)"><img src="thumb/turrets.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/wetleaves.jpg" onclick="return showPic(this)"><img src="thumb/wetleaves.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/innerplant.jpg" onclick="return showPic(this)"><img src="thumb/innerplant.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/beachflower.jpg" onclick="return showPic(this)"><img src="thumb/beachflower.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/elephantgod.jpg" onclick="return showPic(this)"><img src="thumb/elephantgod.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/lookather.jpg" onclick="return showPic(this)"><img src="thumb/lookather.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/templeflowers.jpg" onclick="return showPic(this)"><img src="thumb/templeflowers.jpg" border="0" ></a>
</div>

</div>



<div class="botbarl" >
<img src="images/logo5.jpg" style="border:solid 0px ;">
<br><br><br>
<a href="#" onClick="show('bio'); hide('kamera'); hide('gallery');hide('placeholder')" >biography</a> <br>
<a href="#" onClick="show('kamera'); hide('bio'); hide('gallery') ; hide('placeholder')" >exhibitions</a> <br>
<a href="mailto:keith@keithdavey.wanadoo.co.uk" >contact</a><br>
</div>

<div class="screen" id="placeholder" style="visibility:visible; vertical-align: middle; border:0px;">
<img src="images/kdavey.jpg" style="vertical-align: middle; border:solid #aaaaaa 10px;" id="swap">
</div>


<div class="screen" id="gallery" style="background-image:url(images/kdavey.jpg); background-repeat: no-repeat; border:solid 10px #aaaaaa;" >
<p class="gallerytext">To scroll through the thumbnail pictures place your mouse
over the arrows, or use the scrollbar at the bottom of the screen. <br>
<br>
Click on the thumnail to see a larger version of the image. Keep your mouse
over the chosen image, until veiwed. </p>
</div>

<div class="screen" id="bio" style="background-image: url(images/portrait.jpg);background-repeat: no-repeat;" >
<p class="biotext"> Keith was part of The Pimlico Arts and Media Scheme. His
work is shown in galleries and art spaces throughout London. He is a contributor
to TimeOut, and his work is regularly published in QXmagazine. His imagery
is frequently used by London based clubwear manufacturer 'Regulation' in many
of their major advertising campaigns. </p>
</div>

<div class="screen" id="kamera" style="background-image: url(images/exhibitions-2.jpg);background-repeat: no-repeat;" >
<p class="extext"> <span style="color:000000; font-size:15px">'Shop Girls'<br>
The Box throughout July 2006<br>
32-34 Monmouth Street, Seven Dials, Covent Garden</span><br>
<a style="color:000000; font-size:15px" href="http://maps.google.com/maps?q=WWW.BOXBAR.COM+None.&sll=51.513804,-0.127491&spn=0.009197,0.019834&sspn=0.009681,0.020 878&num=1&start=0&hl=en">
map</a> <br>
<br>
'Shop Girls'<br>
The Blue Room May 2005 ~ June 2005<br>
3, Bateman st. Soho London<br>
<br>
'Shop Girls'<br>
The Green March 2005 ~ April 2005<br>
74, Upper st. Islington London N1<br>
<br>
'Leche-Vitrines'<br>
Freedom Soho Dec 2004 ~ Feb.2005<br>
66, Wardour st. London W1F 0TA<br>
<br>
</p>
</div>

<div class="arr" onMouseOut="stop()" onMouseOver="moving();show('placeholder');hide('ga llery');hide('bio');hide('kamera')" >
<img src="images/rightarrow.gif" >
</div>

<div class="arl" onMouseOut="stop2()" onMouseOver="moving2();show('placeholder');hide('g allery');hide('bio');hide('kamera')" >
<img src="images/leftarrow.gif">
</div>


</body>
</html>
Sep 6 '07 #3

epots9
Expert 100+
P: 1,351
i went to the site where you are linking your images from and its working...firefox 2.0.0.6
Sep 6 '07 #4

P: 8
Sorry but I dont understand that

You went to the site where I am linking my images from ?? surely that is a different script ?? That should work in Safari but is not working in my version of firefox. Mine is 1.07 I think.

But my problem is that this script will not work with netscape firefox and safari at the same time. Maybe I should try some later versions of the browsers. Still it is crap if it is not working in some browsers.

So have you gone to my original files ??? The images are kept with my other files for running the site. Not sure what you are saying here.

Chris
x
Sep 6 '07 #5

epots9
Expert 100+
P: 1,351
u need to update,
firefox 2
ie 7

for ie the lowest version for support i've seen is ie6 and anything below is ignored.

with WC3 standardizing the web, old browser will not function properly.
Sep 6 '07 #6

P: 8
Hello again

Have updated to Firefox 2 but still not working.

Maybe you could paste me the script you have which works with firefox 2 then I can put them together and see if that works.

Chris
x
Sep 6 '07 #7

epots9
Expert 100+
P: 1,351
is this page live? is this the url "http://observationist.co.uk"?
Sep 6 '07 #8

P: 8
No the page is not live. The URL is http://observationist.co.uk but as I say that will take you to a script which will then direct you to another script for safari , netscape, firefox. That script is not working.

The one I have pasted here is the one I am trying to make work, the one I have changed commas for colons in and the one I am trying to modify to get it to work.

Dont understand why you refered back to the live script. In anycase neither seem to be working to me even in firefox 2

I would like to see the code which you got working. I have requested it twice, it would help I think to see that. Are you sure it is working ??

anyhow thanks for the chat it is nice to not feel alone with the problem.

Chris
x
Sep 6 '07 #9

epots9
Expert 100+
P: 1,351
all i did was change to semi-colons and it stopped reporting javascript errors, but since i don't have the images locally they still don't show.
Sep 6 '07 #10

P: 8
Oh I see now.

I will put the file up.

This is the URL for the new text with colons but in situ.

http://observationist.co.uk/indexN2.html#

still does not work on my machine.

Chris
x
Sep 6 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.