I am making a navigation bar with images that are positioned with CSS.
The images are in cells.
They have style attr. style="position: relative; top: 12"
(maybe I got a typo in here
)
when the user puts the mouse over the image (onMouseOver="src='';") it also does style.position=''
When they take the mouse away (onMouseOut) it restores the old image. But it wont move the image back!
I put style.position='relative; top: 12';
I also tried all of this with a return true too.
It just gives me an error saying it cant get the position attribiute.
How can I make it restore itself?
Thanks in advance,
StephenHola...
My apologies. I'm not exactly sure what your trying to accomplish or what the issue is exactly, but I can offer some code that works with CSS and MouseOvers. The result of this would be that when you mouse over the image, the image would move to the right and down 10 px. You can mess with the CSS attributes and make it do whatever you need it to do.
You also mentioned the image was in a cell? I'm assuming it was a table cell? This code does not use tables to position the images. You also said you had a relative positioning, you will need to tweek the code for that if relative is really what you want.
<!-- here is the CSS -->
.image1normal { position:absolute; left:10px; top:10px; }
.image1over { position:absolute; left:20px; top:20px; }
<!-- here is the html -->
<div class="image1normal" onmouseover="this.className='image1over';" onmouseout="this.className='image1normal';"><img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif"></div>1) Use px in your numbers (i.e. width: 100px otherwise.. you're bound to run into some glitches on some browser.
2)Please don't use JS, because if they have no support for CSS that won't work anyways.
3) Ever heard of :hover? You mentioned it was a nav bar right? well then every css supporting browser lets you use :hover for anchor elements. so it'd be like this, obviously changing it to fit your needs:
/*CSS code*/
#nav a {
--style rules in here--
}
#nav a:hover {
--style rules that differ from the first rule in here--
}
<!--HTML Code in here-->
<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://projep.t35.com/">ProjEp</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links/">Links</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"so_on/">So on</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"so_forth">So forth</a>
</div>Aha!
I have to use this.ClassName= bla
Thanks
(Just got back from Holiday of Skiing, so couldnt reply)
I will see which idea is better and works on IE and MozillakK.I'll have to use the onmouseover or make lots of different classes for the new src....
I used a mix
C4n w3 937 4 l1nk?
The images are in cells.
They have style attr. style="position: relative; top: 12"
(maybe I got a typo in here
)when the user puts the mouse over the image (onMouseOver="src='';") it also does style.position=''
When they take the mouse away (onMouseOut) it restores the old image. But it wont move the image back!
I put style.position='relative; top: 12';
I also tried all of this with a return true too.
It just gives me an error saying it cant get the position attribiute.
How can I make it restore itself?
Thanks in advance,
StephenHola...
My apologies. I'm not exactly sure what your trying to accomplish or what the issue is exactly, but I can offer some code that works with CSS and MouseOvers. The result of this would be that when you mouse over the image, the image would move to the right and down 10 px. You can mess with the CSS attributes and make it do whatever you need it to do.
You also mentioned the image was in a cell? I'm assuming it was a table cell? This code does not use tables to position the images. You also said you had a relative positioning, you will need to tweek the code for that if relative is really what you want.
<!-- here is the CSS -->
.image1normal { position:absolute; left:10px; top:10px; }
.image1over { position:absolute; left:20px; top:20px; }
<!-- here is the html -->
<div class="image1normal" onmouseover="this.className='image1over';" onmouseout="this.className='image1normal';"><img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif"></div>1) Use px in your numbers (i.e. width: 100px
otherwise.. you're bound to run into some glitches on some browser. 2)Please don't use JS, because if they have no support for CSS that won't work anyways.
3) Ever heard of :hover? You mentioned it was a nav bar right? well then every css supporting browser lets you use :hover for anchor elements. so it'd be like this, obviously changing it to fit your needs:
/*CSS code*/
#nav a {
--style rules in here--
}
#nav a:hover {
--style rules that differ from the first rule in here--
}
<!--HTML Code in here-->
<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://projep.t35.com/">ProjEp</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links/">Links</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"so_on/">So on</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"so_forth">So forth</a>
</div>Aha!
I have to use this.ClassName= bla
Thanks
(Just got back from Holiday of Skiing, so couldnt reply)I will see which idea is better and works on IE and MozillakK.I'll have to use the onmouseover or make lots of different classes for the new src....
I used a mix
C4n w3 937 4 l1nk?