Dreamweaver rollover images

kev269 · 03-Dec-2005, 10:24 AM #1

Hi,

I'm trying to insert a rollover image into Dreamweaver. The original image is fine, but the rollover image becomes slightly smaller when I have the mouse cursor over it. Both the original and the rollover image are exactly the same size. Is there a way to change this so that the rollover image doesn't become smaller?

Thanks for your help.

deepdiver01 · 03-Dec-2005, 10:37 AM #2

Hi kev,

I am assuming that you are using the rollover function in dreamweaver to create a rollover with javascript (insert>image objects>rollover image), and you have 2 images you are working with.

As long as your 2 images are exactly the same dimensions, and there is sufficent room to accomodate the images within the cell you are putting them in, this should not be occuring.

What changes have you made to the image for the mouseover?

Perhaps give us a sample of the code you are using and maybe a screen shot of the image dimensions, and we may be able to sort this out.

Deep.

kev269 · 11:23 AM

i uploaded it here http://www.aoxk61.dsl.pipex.com/index.html

it might take upto a minute for the rollover image to load.

the only change i made to it was the background colour. ive just realized that only in Internet Explorer does the rollover button get small and the text gets smaller too. But in Firefox, the rollover button just moves down slightly.

thanks.

ptvGuy · 03-Dec-2005, 06:55 PM #4

I'm not seeing a size change at all. I'm seeing a one-pixel drop in both IE6 and Firefox 1.0.7.

deepdiver01 · 03-Dec-2005, 07:41 PM #5

Sorry about taking so in getting back to you.

As ptvGuy said, all I can see is the 1 pixel drop as well.

How about getting rid of the Javascript rollover and trying CSS instead. You will find that it will be a lot more stable, is a lot less coding (cleaner pages), most of the coding can be placed on an external stylesheet, and it will load a lot quicker.

Here is something I just bashed up for you to give you an idea. Try this out.

The images I knocked up are attached.

In a stylesheet.css file, place the following code:

p.navbuttons a {
background-color: #ffffff;
background-image: url(home-off.gif)
/* Don't forget 'images/home-off.gif' if images in separate folder*/
display: block;
padding: 0px 0px 0px 0px;
width: 100px;
height: 50px;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
background-repeat: no-repeat;
}
p.navbuttons a:hover, p.navbuttons a:active {
background-color: #333333;
background-image: url(home-on.gif);
background-repeat: no-repeat;
}

Now, on your index.html page put this code in the head of the document:

<link href="stylesheet.css" rel="stylesheet" type="text/css">
/*Remember path to your stylesheet may change depending upon where you place the file */

Finally, in the cell that you want your button to be placed, insert this code:

<p class="navbuttons"><a href="pagetobelinked.htm"> </a></p>

I have just tried it on my localhost and it works a treat.

Again, you will find it easy to insert this code on all your pages (not sure how your page is laid out) and it is a damn sight easier to modify at a later date (just change the stylesheet) and a lot cleaner.

Hope this helps.

Deep.

kev269 · 04-Dec-2005, 08:30 AM #6

i dont know if i am doing anything wrong, but once I have inserted all the code, a small underscore line apears in Dreamweaver. When I test it in Internet Explorer, the line appears and when I put the mouse cursor over it, a slightly larger part turns orange.

ive done the stylesheet.css file too

<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<p class="navbuttons"><a href="pagetobelinked.htm" class="style1"> </a></p>
</body>
</html>

deepdiver01 · 04-Dec-2005, 09:18 PM #7

Hi Kev,

The line you are seeing is the "&nbsp" that I accidently left in there. Just delete that and the line should disappear.

Try that. Sorry about that.

Deep.

Sequal7 · 04-Dec-2005, 11:12 PM #8

Hello

The error isnt dreamweaver, it's your images they are not equal.

http://www.aoxk61.dsl.pipex.com/SITE/home_top.gif = 140 x 50
http://www.aoxk61.dsl.pipex.com/SITE/home_bottom.gif = 140 x 51

Change the second image, they will work fine.

kev269 · 05-Dec-2005, 04:27 AM #9

hmm thanks everyone, i dont know how the second image became 51! lol

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)