HeLp! HoW do I do this? [Archive]

View Full Version : HeLp! HoW do I do this?

smartalecc5

02-25-2003, 03:05 AM

How do I make these rollover images be touching eachother - I do not want any space in between them. The site is www.geocities.com/socomdelta2/rolltest.html and the code i used is

<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">





</script>
</HEAD>

<BODY>
<a href="" onmouseover="image1.src='02.gif';"
onmouseout="image1.src='01.gif';">
<img name="image1" src="01.gif" border=0></a>

<a href="" onmouseover="image2.src='02.gif';"
onmouseout="image2.src='01.gif';">
<img name="image2" src="01.gif" border=0></a>

<a href="" onmouseover="image3.src='02.gif';"
onmouseout="image3.src='01.gif';">
<img name="image3" src="01.gif" border=0></a>

<a href="" onmouseover="image4.src='02.gif';"
onmouseout="image4.src='01.gif';">
<img name="image4" src="01.gif" border=0></a>

</body>
</html>

justame

02-25-2003, 03:49 AM

sma...
tryyy just a taking® out the 'linebreaks'...aka have your code like...
<a href="" onmouseover="image1.src='02.gif';"etc..."><img name="image1" src="01.gif" border=0></a><a href="" onmouseover="image2.src='02.gif';" etc..."><img name="image2" src="01.gif" border=0></a>

pardicity3

02-25-2003, 04:29 AM

If that doesn't work, you may want to try putting style="padding: 0px;" in your image tags.

ronaldb66

02-25-2003, 09:31 AM

Try also setting the border to 0px; images often receive a border by default when used inside a link.

Cris79

02-25-2003, 10:08 AM

Try to put the images in a table ant give to the <td> the width and height of the image. Like this:

<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="100" height="50">
<a href="" onmouseover="image1.src='02.gif';"
onmouseout="image1.src='01.gif';">
<img name="image1" src="01.gif" border=0></a>
</td>
<td width="100" height="50">
<a href="" onmouseover="image2.src='02.gif';"
onmouseout="image2.src='01.gif';">
<img name="image2" src="01.gif" border=0></a>
</td>
<td width="100" height="50">
<a href="" onmouseover="image3.src='02.gif';"
onmouseout="image3.src='01.gif';">
<img name="image3" src="01.gif" border=0></a>
</td>
<td width="100" height="50">
<a href="" onmouseover="image4.src='02.gif';"
onmouseout="image4.src='01.gif';">
<img name="image4" src="01.gif" border=0></a>
</td>
</tr></table>

thox

02-25-2003, 01:27 PM

ewww... someone suggested a table.. *throws up*

the problem you may be having is the whitespace between the images as already suggested. you're not using any styles here so that is the only thing causing the gaps.

a table would work... so would making it into a flash animation, or maybe you could get your users to download an applet specifically for your rollovers? any other bad techniques to solve this situation? :D

justame

02-25-2003, 01:38 PM

/me just a whispers® to cri...
with youuur just a table® setup??? there would stilll be just a gap® 'cause you donttt have your ol' </td><td> on the sammme line...:O(((

tho...
just a heyyy® now.../me does use just a tables® n' isss just a satified® with their 'working/layout' just a bilities® ...:O)))
/me is just a mom® who just a believes® the morrre bells/whistles/code ??? the morrre than can go just a wrong® hehehe...n' ifin' its not just a broken®??? whyyy fix ...errr just a upgrade® it??? lol...

ronaldb66

02-25-2003, 01:49 PM

Using tables for layout is one thing, if you don't trust CSS yet or want to continue supporting stoneage browsers, but introducing yet another table just to get some images lining up is overkill, if you ask me...

RoyW

02-25-2003, 03:24 PM

First, the errors in your javascript.

image1 = new Image();
image1.src = "02.gif";

<img name="image1" ....>

Here you have 2 objects named "image1" this can cause conflict
and in IE5 it actually causes errors when you first rollover the images. try changing the code to

image1on = new Image();
image1on.src = "02.gif";

The reason there are gaps is because there are gaps between
the end anchor tags and the start anchor tags (the </a> and <a> tags).
You already have a border of "0" and you don't need to use a table.
All you need to do is change the HTML formatting to

<a href=""
onmouseover="image1.src='02.gif';"
onmouseout="image1.src='01.gif';"><img name="image1"
src="01.gif" border=0></a
><a href=""
onmouseover="image2.src='02.gif';"
onmouseout="image2.src='01.gif';"><img name="image2"
src="01.gif" border=0></a
><a href=""
onmouseover="image3.src='02.gif';"
onmouseout="image3.src='01.gif';"><img name="image3"
src="01.gif" border=0></a
><a href=""
onmouseover="image4.src='02.gif';"
onmouseout="image4.src='01.gif';"><img name="image4"
src="01.gif" border=0></a
>

For more information on whitespace and HTML formatting
check out this page I wrote a couple of years back. HTML Formatting (http://www.roy.whittle.com/manual/man2_IntroHTML.html)

smartalecc5

02-25-2003, 11:48 PM

is there anyway to show the rollover image with out linking it? I think that is my problem...

ronaldb66

02-26-2003, 02:33 PM

... who would have thought of that?
RoyW,

you're right, and since Justame suggested the same thing and the one and only real solution to the initial problem a couple of post agos i'll have to give her (right, Jus?) at least shared credit for it; nothing to do with margins, padding, borders, just plain ol' formatting... sad, really.

Smartalecc5,

ehh... what's the point in rollover images if they aren't links...? :confused:
Anyway: the mouseover and mouseout events should also work on other elements, but support of that is rather browser-dependent and only applies to newer versions; the events on the a element are just the most reliable and have the widest support.

smartalecc5

02-26-2003, 09:59 PM

:mad: :mad: :mad: :mad: :mad: :cool: I just changed the background to black and ican't see the difference now!! *slaps himself on the head*

justame

02-26-2003, 10:40 PM

Originally posted by ronaldb66
i'll have to give her (right, Jus?)

/me just a whispers® to ron...
just a yup® hehehe...

n' /me doesnt look @ it as just a being® sad, really ...lol.../me just a looks® @ it as sommmeone else just a learning® the same ol' lesson /me just a learned® ...n' pauses to reflect...hmmm...just a few® years back...:O)))