# 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">
<!--

function swapImage(url)
{
     var d = document.getElementByName('bigimage');

     d.src = url;
}

-->
</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">
> <!--
> function MM_preloadImages() { //v3.0
> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
> ...


_

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" />
> ...


----------



## 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  )

so in this chunk:


> #image_container
> {
> margin: 0 auto;
> 
> ...


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;
> }
> ...



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


----------



## mr e (Sep 17, 2007)

Haha no worries



> #image_container
> {
> margin: 0 auto;
> 
> ...


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


> #thumbs a img
> {
> border: 0;
> 
> ...


but then if you had an image that wasn't a link, it wouldn't have padding, which may or may not matter in the way you're doing it


----------



## AdamZx3 (Sep 17, 2007)

ooooh, ok thats makes sense. I will have to get a basic css book sometime to learn the syntax a bit more if I ever get some spare time!

I have another quick question (i'm going to have to send you some money for a steak dinner!)

Do you know what browsers support the css kerning style (making letters squished together) like the helvetica bold in the top left corner of my ps concept. I can't find a solid answer on that, might end up making gifs instead to simplify it.

Btw the code you provided was so much cleaner than the macromedia script I had above! , not to mention I can actually follow this stuff somewhat 

I will be working on the site throughout the week, I will post a progress link....hopefully finished!


----------



## mr e (Sep 17, 2007)

You can check the wiki page for compatibility, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)

Search for "letter-spacing", it's only on there twice, the Trident engine is what IE uses, and Gecko is what Mozilla's based off of

Looks like it's good in IE 4+, FF 1.0+, and Opera 7.0+


----------

