problem with rollover images

CB
Posted By
Charles_Black
Oct 18, 2008
Views
396
Replies
14
Status
Closed
can get the image to roll over and do what i want, but when i scroll over it with my mouse instead of remaining the same size it shrinks like 100 fold.. can someone help out?

the image i’m using is two poker cards edited to look like a button. i want to roll over and be able to click and go to a destination… i’ve converted the photoshop file to jpg.. is that correct? any help would be appreciated.

charles
Related Tags
image problem rollover

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

CB
Charles_Black
Oct 18, 2008
now it’s just disappearing when i scroll over it
CB
Charles_Black
Oct 18, 2008
help would be appreciated 🙂
S
Silkrooster
Oct 18, 2008
What version of photoshop are you using?
CB
Charles_Black
Oct 19, 2008
CS3 extended i think

here is what i did.. took a picture of two aces.. edited them to look like a button.. added a gradient behind them. made two copies… one of how i wanted the image to look before the rollover, and one after with the image turned to blue.

then i saved them both as JPG files. then in dreamweaver i did a rollover image and did exactly what it said.. first original image, second rollover image.

what happens is it turns blue and everything.. but instead of the image staying the same size, it shrinks for no apparent reason and when it does a bunch of white shows.. all i want it to do is turn blue haha..

is there anything i am doing wrong? i made the gradient and sized each image almost exact.. i don’t know why it would do that.. here is a link to my busted site lol

<http://198.86.244.3/scblack/web140/index.html2>

scroll down and roll over the picture.. tell me if it does what i’m saying..

thanks and any help would be appreciated.

Charles
CB
Charles_Black
Oct 19, 2008
woops wrong link here’s the new one

<http://198.86.244.3/scblack/web140/index2.html>
DM
dave_milbut
Oct 19, 2008
not sure what’s wrong there, because that page is really a mess. but maybe you can make use of this. in general to get a rollover to work in it’s simplest state all you need is this:

<img src="1.jpg" language=javascript onmouseover="this.src=’2.jpg’;" onmouseout="this.src=’1.jpg’;">

as shown as an example here (temp page on my website):
<http://milbut.org/overtest.html>

hope this helps you sort out your problem.
dave
DM
dave_milbut
Oct 19, 2008
right click that page and select "view source to see the code, but it’s really just the img tag above with html and body tags around it…
SB
Sandy Birrell
Oct 19, 2008
The images are also way too big and different sizes. One is over 4000 pixels nearly 1MB and the other is 7000 pixels and 2 MB, the container you are loading them into is only set at 275×240 pixels so that could also be causing problems. Make the pictures to the size of the container and drop the resolution for quicker loading.

HTH.

Don`t Worry, Be Happy

Sandy
—

E-Mail:-
Website:- http://www.ftscotland.co.uk
Looking for a webhost? Try http://www.1and1.co.uk/?k_id=2966019 Fishing Wild at http://www.wild-fishing-scotland.co.uk/
SB
Sandy Birrell
Oct 19, 2008
Sandy Birrell wrote:
The images are also way too big and different sizes. One is over 4000 pixels nearly 1MB and the other is 7000 pixels and 2 MB, the container you are loading them into is only set at 275×240 pixels so that could also be causing problems. Make the pictures to the size of the container and drop the resolution for quicker loading.
HTH.

Don`t Worry, Be Happy

Sandy

Further to this. Your AceGradient2 copy.jpg has a white border round it, so you have saved it with the white border you are seeing.

HTH.
—

Don`t Worry, Be Happy

Sandy
—

E-Mail:-
Website:- http://www.ftscotland.co.uk
Looking for a webhost? Try http://www.1and1.co.uk/?k_id=2966019 Fishing Wild at http://www.wild-fishing-scotland.co.uk/
CB
Charles_Black
Oct 19, 2008
<http://198.86.244.3/scblack/web140/index2.html>

ok here is the updated site:

scroll over the two aces on the bottom.. all i want to do is get rid of that white space all together.. and cropping the image is what generated the problem.. if i crop it and scroll over.. the second rollover image becomes smaller with the white around it.. which is in both cases extremely tacky..

tried your method and encoded it right.. it didn’t do anything .. thanks for trying to help though..

do you have any suggestions on how to get rid of the white space?
SB
Sandy Birrell
Oct 19, 2008
wrote:
<http://198.86.244.3/scblack/web140/index2.html>

ok here is the updated site:

scroll over the two aces on the bottom.. all i want to do is get rid of that white space all together.. and cropping the image is what generated the problem.. if i crop it and scroll over.. the second rollover image becomes smaller with the white around it.. which is in both cases extremely tacky..

tried your method and encoded it right.. it didn’t do anything .. thanks for trying to help though..

do you have any suggestions on how to get rid of the white space?

Try using these two pictures in place of yours and see if that helps.

http://www.ftscotland.co.uk/gallery/temp/AceGradient-001.jpg

http://www.ftscotland.co.uk/gallery/temp/AceGradient2-copy-0 01.jpg

Right click on the links and save to your hard drive and replace yours with them.

Youre other pictures on the site are still too big and the page takes a long while to down load even on broadband. Also try validating it with http://validator.w3.org/ as there are a few errors on the page.

HTH.

—

Don`t Worry, Be Happy

Sandy
—

E-Mail:-
Website:- http://www.ftscotland.co.uk
Looking for a webhost? Try http://www.1and1.co.uk/?k_id=2966019 Fishing Wild at http://www.wild-fishing-scotland.co.uk/
DM
dave_milbut
Oct 19, 2008
I don’t know what’s supposed to be happening but it can’t be right. i’m using firefox 3.

when i scroll down i see the aces on the left in a white box. when i mouse over, the page jumps back to the top of the web page. if i leave the mouse over it it seems to flicker.

you need to simplify to solve your problem. take just the image tag to a new page and start with JUST that. like i did on my sample page. make it do what you want. then move it back.

tried your method and encoded it right.. it didn’t do anything ..

then you did it wrong, because i gave you the straightest version of a rollover you’re going to find.

1) start with 2 images.
2) page displays image #1 in an <img> tag.
3) onmouseover replaces the image’s "src" attribute with image #2
4) onmouseout replaces the image’s "src" attribute with image #1 and you’re back to the beginning.

that’s all there is to it.

image 1 and image 2 should be exactly the same size. (in photoshop, go to image> image size and make sure the pixel dimentions are the same.)
CB
Charles_Black
Oct 20, 2008
oh MY GOD, it worked!!!!!!!!!!

what i was doing wrong was moving the image into a new window for editing, when i was just supposed to duplicate it.. wow i feel really stupid right now

thanks for your help man.. wow

just .. wow
DM
dave_milbut
Oct 20, 2008
no problem. i didn’t really do anything. the key is usually to just simplify down until you can figure it out. good job!

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections