PDA

Click to See Complete Forum and Search --> : Image rollover--should be simple, but it ain't

aceholleran
09-29-2003, 07:53 AM
All I want to do is build a slide show--with (in this case) four blank boxes (image="blanker.gif" names=bloc1,bloc2, etc.) that will be replaced by numbers (number1.gif", etc.).

Yes, I can do this with a mousover event and a mess of code. I am trying to streamline via JS. So, my script is:

function subnum(q) {
document["bloc"+q].src="number"+q+".gif"}


and the body code is

<a href="#" onmouseover="subnum(1)"><img src="blanker.gif" border="0" width="24" height="28" alt="" name="bloc1">

When I put document.bloc[n].gif in the script, I get an error ("bloc is not an object). I would love to see a concise overview on the web of where to use [] in JavaScript. And why no period after "document" before brackets?

Yes, I'm a newbie.

Any help out there?
Khalid Ali
09-29-2003, 09:10 AM
if you had more then one image on the page and all had the same name,then there was a possibility that you can access each image the wya you are trying..,however all of the images are already referenced in an array on the page

images[name or number].src
aceholleran
09-29-2003, 12:21 PM
Originally posted by Khalid Ali
if you had more then one image on the page and all had the same name,then there was a possibility that you can access each image the wya you are trying..,however all of the images are already referenced in an array on the page

images[name or number].src

Khalid,
I'll try to explain better. I am trying to follow your guidelines for posting and not be too general, like "I need help."

Here's the full code in the body; perhaps, in your infinite wisdom you can tell me what my JS should be. I should be able to do this on one line of code, no?

<td><a href="#" onmouseover="subnum(1)"><img src="blanker.gif" border="0" width="24" height="28" alt="" name="bloc1"></td>
<td><a href="#" onmouseover="subnum(2)"><img src="blanker.gif" border="0" width="24" height="28" alt="" name="bloc2"></td>
<td><a href="#" onmouseover="subnum(3)"><img src="blanker.gif" border="0" width="24" height="28" alt="" name="bloc3"></td>
<td><a href="#" onmouseover="subnum(4)"><img src="blanker.gif" border="0" width="24" height="28" alt="" name="bloc4"></td>

But my code is verkockte:

function subnum(q) {
document.bloc[q].src="number"+q+".gif"}

I need to write the correct line that will change "blanker.gif" (which is just a solid 1-color block)
to the proper rollover image, in this case "number[q].gif" so that "blanker1.gif" changes to "number1.gif", and so on.

I thought it was OK to use the "blanker" image four times, as long as I gave each usage a distinct name.
Khalid Ali
09-29-2003, 01:30 PM
This will work,provided there are images with the names you are accessing in the current folder.
<script type="text/javascript">
function subnum(q) {(eval('document.bloc'+q)).src="number"+q+".gif";}
</script>
</head>
<body>
<td><a href="#" ><img src="blanker.gif" onmouseover="subnum(1)" border="0" width="24" height="28" alt="" name="bloc1"></td>
<td><a href="#" ><img src="blanker.gif"onmouseover="subnum(2)" border="0" width="24" height="28" alt="" name="bloc2"></td>
<td><a href="#"><img src="blanker.gif" onmouseover="subnum(3)" border="0" width="24" height="28" alt="" name="bloc3"></td>
<td><a href="#"><img src="blanker.gif" onmouseover="subnum(4)" border="0" width="24" height="28" alt="" name="bloc4"></td>

Couple more things
1. it will load the image at the time when yu mouseover the image,

2. there is no mouseout event,set that to go back to default image