Need your help with some code for rollover images

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi there...

I'm using the code below to add some rollover images to my site... it works well but it stucks the images to each other...

How can I modify the code to have some blank space between the images?

The code is:

--------------------------------------------------------------------------------------------------------
















--------------------------------------------------------------------------------------------------------

Thank you!
Photo of Dimitar Kunev

Dimitar Kunev

  • 4 Posts
  • 0 Reply Likes
  • sad

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Dimitar,

can you wrap your code in the tags < code > code here < /code >. This will allow the code text to be seen. (Take out the spaces after the < and before the >, which is required for the explanation here only).
Photo of Dimitar Kunev

Dimitar Kunev

  • 4 Posts
  • 0 Reply Likes

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://sitename.com/resources/11.jpg";
staticImage1 = new Image();
staticImage1.src = "http://sitename.com/resources/1.jpg";

loadImage2 = new Image();
loadImage2.src = "http://sitename.com/resources/22.jpg";
staticImage2 = new Image();
staticImage2.src = "http://sitename.com/resources/2.jpg";

loadImage3 = new Image();
loadImage3.src = "http://sitename.com/resources/33.jpg";
staticImage3 = new Image();
staticImage3.src = "http://sitename.com/resources/3.jpg";

loadImage4 = new Image();
loadImage4.src = "http://sitename.com/resources/44.jpg";
staticImage4 = new Image();
staticImage4.src = "http://sitename.com/resources/4.jpg";

loadImage5 = new Image();
loadImage5.src = "http://sitename.com/resources/55.jpg";
staticImage5 = new Image();
staticImage5.src = "http://sitename.com/resources/5.jpg";

// End -->
</script>

<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://sitename.com/resources/1.jpg" border=0></span>

<span onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://sitename.com/resources/2.jpg" border=0></span>

<span onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://sitename.com/resources/3.jpg" border=0></span>

<span onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="http://sitename.com/resources/4.jpg" border=0></span>

<span onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="http://sitename.com/resources/5.jpg" border=0></span>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Dimitar,

You can add a </br> to the HTML in the lower segment of the code after each < /span >. This will add one line spacing between each image. You can add more if you wish more space.
Photo of Dimitar Kunev

Dimitar Kunev

  • 4 Posts
  • 0 Reply Likes
Hi there...

For some reason adding <br> or </br> tags doesn't do the job... They stay stuck together!

Please help!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Dimitar,

I will re-create this on a test site and get back to you within 24 hours if that's OK?

Gop.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Dimitar,

This code doesn't produce any outcome for me on my test site. I'll wait to hear from you if there is additional code.
Photo of Dimitar Kunev

Dimitar Kunev

  • 4 Posts
  • 0 Reply Likes
Hi there...

I made it work using <p> and </p> tags...

Thanks for the help!