Coding help for rollovers

AdamZx3 · Sep 12, 2007

I need to figure out how to code these rollovers and thumbnails so that the rollovers in the main picture are preloaded and it needs to pre-load the main images in the background like in the example link below . I don't know if i'll use this format for my photography part yet but I need it for my retouching portfolio, speed is essential so viewers dont turn away, so no flash. I was hoping to code in html or css, and maybey some javascript but would like to stay away from that if possible.

Any help would be appreciated, my coding skills are basic and rusty

Example link, (maybe NSFW, bikinni/ lingerie thumbnails): http://www.pureimage.info/gallery.htm

Also heres a concept made in photoshop

AdamZx3 · Sep 12, 2007

Also would I have to make this page in frames so that the picture would reload separately instead of re-loading the whole page. I have heard of ajax (xhtml and java) which is the same concept of frames I believe...but that sounds out my league unless theres a tut out there that I haven't found yet.

Jeff Colburn · Sep 12, 2007

1 - Do not use frames.
2 - Your retouching page is amazing seeing the before and after.
3 - Go here http://www.stochasticaphelion.com/Tutorials/#

Have Fun,
Jeff

AdamZx3 · Sep 13, 2007

thanks jeff I think that css component tut can help me switch the thumbnails from set 1 to set 2 etc.. or at least I think

What would I search for to make the thumbnails stay put, as well as the rest of the page but load just the main pic, preferablly in css. I have searched css frames etc.. but I cant really find a setup like what I need.

In the old days I would make a new page for each picture and link the thumb to it, but with 50-60 images the management and speed seem very iffy.

Edit*

Might have found something...going to try to re arrange the thumbnails and remove the opacity change this weekend, unless someone here knows it wont work
http://www.tankedup-imaging.com/css_dev/opacity.html

mr e · Sep 13, 2007

To preload images, you can do

<div style="display: none;">
<img src="./images/image1.jpg" alt="title" />
<img src ...
</div>

and you can put this wherever on your page and with most browsers it will preload them for you

Then to change the image without reloading the page, you'd want something like

<head>
<script type="text/javascript">

</script>
</head>

<body>

<img src="beginningimage.jpg" id="bigimage" alt="beginning image" />

<a href="#" onclick="swapImage('image1.jpg'); return false;"><img src="image1thumb.jpg" alt="image1" /></a>

etc...
</body>

This is untested so if there are any problems I can try to work them out for you if you want

AdamZx3 · Sep 14, 2007

Hey thanks Mr e!

I had a quick question if its not too much to ask,

for this line of code does it pertain to the thumbnail, so when thumbnail is clicked this runs and pops up image1.jpg?

<a href="#" onclick="swapImage('image1.jpg'); return false;"><img src="image1thumb.jpg" alt="image1" /></a>

and how do you position the images that will pop up, would the code have to be nested inside a table cell the same size as the image?

thanks again, i'll have to play around with it tomorrow

mr e · Sep 15, 2007

It doesn't pop it up, it'll load the image with the id "bigimage" with the new image

You don't have to nest it inside anything, just position it wherever you want, and just have some image in there initially

You might also try a very basic page so you can see what the Javascript does without anything else possibly screwing it up

Let me know if you need anything else!

ShaCow · Sep 16, 2007

on my site I use the following code.

put this in your head tag

<script type="text/javascript">

</script>

now this is what you use in your body tag for your images... just replace the image name with yours etc.

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/shacow_homeover.gif',1)"><img src="images/shacow_home.gif" alt="Homepage" name="home" width="83" height="41" border="0" id="home" /></a>

Click to expand...

works perfect on my site http://shacow.com and it preloads the images too.

hope this helps, Shaun

AdamZx3 · Sep 16, 2007

Thanks both of you for the code.

I tried Mr e' s code and I couldnt get it working so I ended up finding this one this morning, though I think it will have some limitations on the rollover for the swapped images...will be playing with that tonight, will let you know.

Anyway heres the code I have so far, will try the new stuff.
http://web.mac.com/adamb/test/retouching.html

mr e · Sep 16, 2007

Here's a working example I just wrote up, feel free to copy the code all you want, hope you don't mind I used your images as examples

http://www.ijphotography.com/stuff/rollover.htm

AdamZx3 · Sep 16, 2007

Thanks Mr E, much appriciated!

Wow i have been working for hours and am so frusterated

Whats been frustrating me the most is getting main image to rollover, I have been playing with some code, but I dont know what i'm getting into

Doesnt work however, just boxes with x's :/ Now I know why designers pay to have this stuff done!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Adam B - Retouching Portfolio</title>
<script type="text/javascript">

</script>

</head>

onLoad="MM_preloadImages('/images/image01a.jpg','/images/image01b.jpg','/images/image01c.jpg');pio_swapImage('big1','/images/image01a.jpg','/images/image01b.jpg')">
<body bgcolor="#332720" topmargin="0" leftmargin="0" marginwidth="0">

<a href="javascript:;" onclick="pio_swapImage('big1','/images/image01a.jpg','/images/image01b.jpg')"><img src="/images/image01c.jpg" name="Image6" width="70" height="70" border="0" id="Image6"></a>

<a href="javascript:;" onclick="pio_swapImage('big1','/images/image02a.jpg','/images/image02b.jpg')"><img src="/images/image02c.jpg" width="70" height="70" border="0"></a>

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/shacow_homeover.gif',1)"><img src="http://www.thephotoforum.com/forum/images/shacow_home.gif" alt="Homepage" name="home" width="83" height="41" border="0" id="home" /></a>

</body>
</html>

AdamZx3 · Sep 16, 2007

Oh forgot to add, if you guys feel like a challange and would want to use some images I have them here, basicly named like, a is the after, b s the before and rollover and c is the thumbnails (70x70). No prob if you can't, I dont expect any handouts

i'm way over my head! (at least im brushing up my limited web skills lol)

http://web.mac.com/adambrodzinski/test/images/image02c.jpg

mr e · Sep 16, 2007

I updated my example for rollover images, let me know if you want something specifically explained, I'm not sure how obvious the code is to ummm...normal people

For this example, you must name images such as image1.jpg/image1over.jpg or redcar.jpg/redcarover.jpg etc

http://www.ijphotography.com/stuff/rollover.htm

AdamZx3 · Sep 17, 2007

well gee wiz would you look at that :mrgreen:

I bet it took you less than a few seconds to figure that out! I struggled with intro to visual basic in highschool, I guess that side of my brain is pretty empty haha.

I can pretty much decipher the code now that its there, I had a few questions on what the css styles are doing (go figure I was chasing my now ex girlfriend in html class in college when we where doing css in notepad, and she did all my homework lol...shoulda had my mind on something worthwhile :wink:

)

so in this chunk:

#image_container
{
margin: 0 auto;

text-align: center;
}

Anything with id="image_container" in its div tag will have a margin of 0 and text aligned to the center as long as it within <div id="image_container"></div> ...is that correct?

if so than what is the differance between these two? will they both be applied to a <div #thumbs> string? and what does the "img" and "a img" do?

#thumbs img
{
padding: 5px;
}

#thumbs a img
{
border: 0;
}

Thanks again sir :mrgreen::mrgreen::mrgreen::mrgreen::mrgreen:

mr e · Sep 17, 2007

Haha no worries

#image_container
{
margin: 0 auto;

text-align: center;
}

You got it, except for the "margin: 0 auto" is shorthand for "margin: 0 auto 0 auto", meaning 0 bottom and top margin, and auto left and right (margins go top right bottom left), which is much like the deprecated <center> tag which centers the element.

"#thumbs img" means any img tag inside an element with id="thumbs"

"#thumbs a img" means any img tag inside an a tag inside an element with id="thumbs", this is to get rid of the border around an image when it's a link, you have to target it specifically, for example #thumbs img wouldn't target it (for whatever reason).

I probably could've shortened it like this