DHTML moving an image

**epots9** · Sep 6 '07, 01:32 PM

i was able to get it working in firefox, you have mixed up your semi-colons with commas.

yours:
[html]
<div class="topbar" onMouseOver="sh ow('placeholder '),hide('galler y'),hide('bio') ,hide('kamera') " onMouseOut="hid e('placeholder' ),show('gallery ')">
[/html]

should be:
[html]
<div class="topbar" onMouseOver="sh ow('placeholder ');hide('galler y');hide('bio') ;hide('kamera') ;" onMouseOut="hid e('placeholder' );show('gallery ');">
[/html]

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

good luck

**cjparis** · Sep 6 '07, 02:27 PM

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>observat ionist</title>
<script type="text/javascript">

var ns4 = (document.layer s);
var ie4 = (document.all && !document.getEl ementById);
var ie5 = (document.all && document.getEle mentById);
var ns6 = (!document.all && document.getEle mentById);

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

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

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

}

function moving(){
if (document.getEl ementById("slid er").style.left <10000)
document.getEle mentById("slide r").style.le ft-=5
moveid=setTimeo ut("moving()",5 0)
}

function stop(){
clearTimeout(mo veid)

}

function moving2(){
if (document.getEl ementById("slid er").style.left <10000)
document.getEle mentById("slide r").style.left+ =5
moveid2=setTime out("moving2()" ,50)
}
function stop2(){
clearTimeout(mo veid2)

}

</script>

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

</head>

<body>

<div class="bstrip" onMouseOver="sh ow('placeholder ');hide('galler y');hide('bio') ;hide('kamera') " onMouseOut="hid e('placeholder' );show('gallery ')"></div>

<div class="topbar" onMouseOver="sh ow('placeholder ');hide('galler y');hide('bio') ;hide('kamera') " onMouseOut="hid e('placeholder' );show('gallery ')">

<div class="gallery" id="slider" > <img src="images/space.jpg" style="border: solid 0px; visibility:hidd en;">
<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.j pg" onclick="return showPic(this)"> <img src="thumb/templeflowers.j pg" border="0" ></a>
</div>

</div>

<div class="botbarl" >
<img src="images/logo5.jpg" style="border:s olid 0px ;">
<br><br><br>
<a href="#" onClick="show(' bio'); hide('kamera'); hide('gallery') ;hide('placehol der')" >biography</a> <br>
<a href="#" onClick="show(' kamera'); hide('bio'); hide('gallery') ; hide('placehold er')" >exhibitions</a> <br>
<a href="mailto:ke ith@keithdavey. wanadoo.co.uk" >contact</a><br>
</div>

<div class="screen" id="placeholder " style="visibili ty: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="backgrou nd-image:url(image s/kdavey.jpg); background-repeat: no-repeat; border:solid 10px #aaaaaa;" >
<p class="galleryt ext">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="backgrou nd-image: url(images/portrait.jpg);b ackground-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="backgrou nd-image: url(images/exhibitions-2.jpg);backgrou nd-repeat: no-repeat;" >
<p class="extext"> <span style="color:00 0000; font-size:15px">'Sho p Girls'<br>
The Box throughout July 2006<br>
32-34 Monmouth Street, Seven Dials, Covent Garden</span><br>
<a style="color:00 0000; font-size:15px" href="http://maps.google.com/maps?q=WWW.BOXB AR.COM+None.&sl l=51.513804,-0.127491&spn=0. 009197,0.019834 &sspn=0.009681, 0.020878&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="sto p()" onMouseOver="mo ving();show('pl aceholder');hid e('gallery');hi de('bio');hide( 'kamera')" >
<img src="images/rightarrow.gif" >
</div>

<div class="arl" onMouseOut="sto p2()" onMouseOver="mo ving2();show('p laceholder');hi de('gallery');h ide('bio');hide ('kamera')" >
<img src="images/leftarrow.gif">
</div>

</body>
</html>

**epots9** · Sep 6 '07, 03:21 PM

i went to the site where you are linking your images from and its working...firef ox 2.0.0.6

**cjparis** · Sep 6 '07, 03:32 PM

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

**epots9** · Sep 6 '07, 03:54 PM

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.

**cjparis** · Sep 6 '07, 04:36 PM

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

**epots9** · Sep 6 '07, 04:46 PM

is this page live? is this the url "http://observationist. co.uk"?

**cjparis** · Sep 6 '07, 05:33 PM

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

**epots9** · Sep 6 '07, 05:42 PM

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.

**cjparis** · Sep 6 '07, 06:03 PM

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

DHTML moving an image

DHTML moving an image

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment