3 replies [Last post]
Jonte92
Offline
newbie
Last seen: 4 years 47 weeks ago
Joined: 2009-05-19
Posts: 7
Points: 0

Hey guys!

I've now got a media section on my website and I want the pictures to get bigger when I hover the mouse on them, And I want everything else to stay like it is.

The picture code is now:
in the Style.Css:

#b1 {
	background-image:url(images/1.bmp);
	width:150px;
	height:113px;
	position:relative;
	float:left;
	margin: 0px 0px 0px 10px
}

And in the Media.html:
<a href="images\1S.bmp"><div id="b1"></div></a>

Hope you can help me out with this!
Thanks! Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Your code is teh

Your code is teh arglebargled engrish moest goodry.

Anchors () are inlines.

Nope Nope nope.

But that aside, most people end up having two versions of their image-- the thumb and the large one. Methods to get the browser to enlarge an image look like a camel had to dump his load, because browsers suck at enlarging images. It looks super nasty pixellated usually. Shrinking's not so bad, but still can't beat some goofy-@ssed paint program.

I usually have an anchor with the large image in it, and set in the CSS to display: block, so I can set a height and a width (note, this still doesn't let it hold real blocks in the HTML), and give it the thumb as a background image. The real image, we'd pull off-screen and let :hover on the anchor bring it back onscreen, wherever you need it to be.

Something like:
(untested)

Teh image of d00m

The anchor has an id and the href leading to itself to protect people who accidentally click on it-- you don't want to send them to the beginning/top of the page because they accidentally clicked on it, no no.

#myself {
position: relative; (so we can abso-po the child img)
display: block; (so we can haz height and width)
width: whatever the thumbnail is;
height: whatever the thumbnail is;
background: url(thethumbnail.gif) 0 0 no-repeat;
}
#myself img {
position: absolute;
left: -9999em; (totally off-screen man)
width: whatever you stated in the HTML;
height: whatever you stated in the HTML;
if any browsers are buggy, go ahead and add in a top: 0;
}

now the hovering part... should also work on :focus too for teh keyboarderz...

#myself:focus img, #myself:hover img {
left: whatever's onscreen enough for you-- start at 0;
}

And there is it. Now remember that the img will go left from the anchor. If this isn't what you need, you might need to stuff all your anchors into some other box, and instead of the anchors having pos: rel on them, this other box would. Then the images would be moved from that new box's top left corner instead of each anchor's. This is better if there's some central part of the page where the large images are supposed to all appear.

This doesn't work on click, except in those browsers who keep the focus on anchors after clicking (firefox is one of them).

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
Offline
Guru
Waco, TX
Last seen: 2 years 12 weeks ago
Waco, TX
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

Here are some


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

jlhaslip
Offline
Enthusiast
Last seen: 4 years 47 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Google Hoverbox Image

Google Hoverbox Image Gallery (if you need to after the wonderful guidance provided above.)

I'm having a good day...so far.