Rollover image not working right.

[polomolo]

Hi, i've got a problem with my rollover image.
I'm making it from the Insert menu in Dreamweaver, and simply
placing them in a class under a div Id

so here's my Html...

<div class="content">
<div id="contact"></div>
<div id="siteinfo"></div>

<div id="redbut">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('redbutton2','','Images/redbuttonhover.png',1)"><img src="Images/redbutton.png" name="redbutton2" width="135" height="136" border="0" id="redbutton" /></a></div>

<div id="paulb"></div>


The red colored text is where the problem is occurring, What happens is, the link just doesn't work, i tried it on safari and firefox.
But it only works when its out of the 'Div id' and instead it works great in the class, but its not the right position, i don't want it there!
So when I make the same rollover image somewhere in the <div class="content"> the link works great. but I do the same thing in the place where its supposed to sit which is <div id+"redbut"> and it doesn't work.

please help if you know what's going on... Thanks!

Paul

[Centauri]

Would need a link to the uploaded site so far, or at the least the full page and css coding - there is probably something else affecting this. What it looks like you have there is a list of links, so it should be marked up as a list without all those separate divs, and none of that javascript is required to do simple rollovers either...

[scragar]

anyone other than me think it would be better to replace your javascript with a simple CSS effect?

make your links "display: block" then fill in some text, then use CSS to add a BG image, use the hover atribute to change this and voila, easily done(if you don't want the text to show over the image make it a simple nbsp or <br />)

not only will almost everyone see it(instead of just those with javascript enabled), but it's easier to do and understand for fixing...

[polomolo]

hi, thanks for replying.
I didn't really write that javascript up on there, I did it through the dreamweaver menu>insert>image>rollover image. and it did all that (we've been taught this through UNI so I havn't checked how it is through CSS). The thing is I don't have the site on the net as well, still have heaps to go..
But last night, after i posted this, i kept going with testing stuff, putting things in other places and rearranging div's.
_________________________
<div class="content">
<div id="contact">
<div id="siteinfo">
</div>
<div id="redbutton"><a href="http://pure-zeki.deviantart.com"><img src="Images/redbutton.png" alt="Enter Site" width="135" height="136" border="0" longdesc= "http://pure-zeki.deviantart.com" /></a>
</div>
</div>
<div id="paulb"></div>

</div>
___________________________
So i came up with this code that actually for some reason, worked.

I'm not really a great Html or CSS genius, I'm kind of learning for myself through this project, and I'm only learning through reading here and there and testing stuff out to learn from mistakes basically.

I've added a screenshot of dreamweaver. With the whole of the Content Div selected.

That name "Paul Berzekian" used to be under the Red circle, but when I removed some </div>s and placed them in other places, some objects moved to another place, but they still look right in the website, and the links work in both safari and firefox.

I don't know what the problem was, But i'd like to know, just so I would know if theres a right way of doing this, If I try and put the "Paul Berzekian" under the circle again, basically with the old html code...the link won't work.

here's the CSS i'm using. It might be really bad I don't know.

______________________________
body {
background-color: #333333;
color: #FFF;
padding: 0;
margin: 0;
font: 0.7em Arial, sans-serif;
line-height: normal;
}

.content {
margin-right: 45%;
margin-top: 10%;
float: right;
}
#redbutton {
background-image: url(Images/redbutton.png) no-repeat;
width: 135px;
height: 136px;
padding-left: 331px;
background-position: bottom right;
padding-top: 95px;
}

#siteinfo {
background-image: url(Images/siteinfo.png);
background-repeat:no-repeat;
background-position:right;
width: 278px;
height: 231px;
float: left;
padding-left: 40px;
}

#contact {
background-image: url(Images/contactinfo.png);
background-repeat:no-repeat;
background-position:right;
width: 711px;
height: 231px;
float: left;
position: absolute;
}

#paulb {
background-image: url(Images/paulberzekian.png);
background-repeat:no-repeat;
background-position:right;
width: 466px;
height: 39px;
float: left;
position: static;
padding-top: 100px;
}
______________________________

Thanks for the help..

Paul

[polomolo]

anyone other than me think it would be better to replace your javascript with a simple CSS effect?

make your links "display: block" then fill in some text, then use CSS to add a BG image, use the hover atribute to change this and voila, easily done(if you don't want the text to show over the image make it a simple nbsp or <br />)

not only will almost everyone see it(instead of just those with javascript enabled), but it's easier to do and understand for fixing...

That's actually a smart way of doing it, i'll keep it in mind!
Thanks.