Hey, I'm having problems adding space between javascript rollover images. currently I have dead space on the edges of each to give them the appearance of space between them but the rollover then occurs when the mouse is outside the area I want them to be hot. I'd like to be able to adjust the space with a simple number, instead of editing all the images which is rather time consuming. I've tried adding margin="0 50" (numbers just a guess) but it had no affect.

 

here's a snippet of my code:

 

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Projects','','home images/home_projects_over.png',1)"><img src="home images/home_projects.png" name="Projects" width="280" height="188" border="0" id="Projects" /></a> 
 <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ZSketches','','home images/home_zsketches_over.png',1)"><img src="home images/home_zsketches.png" name="ZSketches" width="280" height="188" border="0" id="ZSketches" /></a> 
 <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Animations','','home images/home_animations_over.png',1)"><img src="home images/home_animations.png" name="Animations" width="280" height="188" border="0" id="Animations" /></a>

 

any help will be greatly appreciated.

Hey there, make sure the A element is the same size as the images. If you haven't already you can install FireBug, right click on the element, click "inspect element". At the bottom left, hover over the highlighted line (in firebug) and it will show you how much space the A element is taking up. If it's larger than the image, then that's what's up!

hm... I have to admit I am quite a newbie at this. I installed firebug, and I can't see anything wrong but then again I don't really know what I'm doing lol. I went ahead and uploaded what I have, I'm still in the blocking out phase. Should I be able to add a margin to the images to add space between them? Or is there another way I should be attempting this?

 

http://www.seanpennock.com

 

thanks again.