Help with Java Script Code for Images

@teekaMar 17.2006

I received help here some time ago so I’m hoping that will be the case again!

I wanted the code so that when you mouseover a thumbnail picture it will enlarge in a different secion for easier viewing.

Code I received is this(and it does work)
~~[B]~~
<script type=”text/javascript”>
function newImg(input)
{
document.getElementById(‘bigImg’).src = input;
}
</script>[/B]

However, now I want to have two separate sections of different pics on the same page, where each section will work independantly.

What is happening is on the 2nd section, on mouseover, the picture enlarges in the “previous” section! I checked Markup Validation Service and was told that : ~~[B]~~ID “BIGIMG” is already defined.[/B] So, I assuming I can’t use more than once on a page.

So my question is, What CAN I use to allow this to happen.??

If the entire section of code is needed to help explain myself, let me know.
Thanks,

to post a comment

JavaScript

5 Comments(s) _↴

@James_GatkaMar 17.2006 — #teeka:

Would code for opening a "floating, trailing" image onmouseover of the thumbnail interest you?

So long as the user is hovering over the thumbnail image, a larger image "floats" over the page and tracks the movement of the mouse.

@phpnoviceMar 18.2006 — #So my question is, What CAN I use to allow this to happen.??[/QUOTE]
The answer is to pass the ID as an argument to your function.

<i>
 </i>&lt;script type="text/javascript"&gt; 
 function newImg(input, id)
 {
 document.getElementById(id).src = input;
 }
 &lt;/script&gt;

Thus, when you call this function, you can call it from any number of places as follows:

newImg('large1.jpg', 'bigImg1')

newImg('large2.jpg', 'bigImg2')

newImg('large3.jpg', 'bigImg3')

newImg('large4.jpg', 'bigImg4')

newImg('large5.jpg', 'bigImg5')

newImg('large6.jpg', 'bigImg6')

newImg('large7.jpg', 'bigImg7')

@teekaauthorMar 18.2006 — #Arrgh! I appreciate your help, and I've tried everything, but I'm missing something and can't make it work. Here's my code...can you correct it for me please?? ? THANK YOU!!!

[U][B]MY HEADER CODE:[/B][/U]

<script type="text/javascript">

function newImg(input)

{

document.getElementById('bigImg').src = input;

}

</script>

[U][B]MY CODE FOR THE 2 SEPARATE SECTIONS OF PICTURES:[/B][/U]

[B]FIRST SECTION:[/B]

<img id="bigImg" src="gravesexterior.jpg" align="left" width="250" height="175" ALT="Exterior View of 15 Concession Street, Walsingham">

15 CONCESSIION STREET, WALSINGHAM Beautiful 3 bedroom country property just inside the village of Walsingham.

4.31 acres of nature with ravine and stream. 5 minutes to Long Point Beach and boating. This custom built home offers oak hardwood floors

and cabinets, ceramic tile, Berber carpets, 3 baths, steel tile roof, security system and much more. 2 -1/2 car attached garage, 2827 sq.ft.

of living space! Asking: $389,000 mls 

<img src="gravesbackyard.jpg" border="1" ALT="Backyard" width="100" height="80" onmouseover="newImg('gravesbackyard.jpg');" onmouseout="newImg('gravesexterior.jpg');">

<img src="graveseastsideview.jpg" border="1" ALT="East Side View" width="100" height="80" onmouseover="newImg('graveseastsideview.jpg');" onmouseout="newImg('gravesexterior.jpg');">

<img src="gravesgarage.jpg" border="1" ALT="Garage" width="100" height="80" onmouseover="newImg('gravesgarage.jpg');" onmouseout="newImg('gravesexterior.jpg');">

<img src="gravesrearview.jpg" border="1" ALT="Rear View" width="100" height="80" onmouseover="newImg('gravesrearview.jpg');" onmouseout="newImg('gravesexterior.jpg');">

<img src="gravesstream.jpg" border="1" ALT="Stream" width="100" height="80" onmouseover="newImg('gravesstream.jpg');" onmouseout="newImg('gravesexterior.jpg');">

<img src="graveswalkingpath.jpg" border="1" ALT="Walking Path" width="100" height="80" onmouseover="newImg('graveswalkingpath.jpg');" onmouseout="newImg('gravesexterior.jpg');">

 



(Hold mouse over thumbnail picture to view larger version of it)





 

[B]SECOND SECTION:[/B]

[B]NOTE: The mouseover [U]does[/U] work, but the picture enlarges in the section above and not in this section[/B].

<img id="bigImg" src="anseeuwexterior.jpg" align="left" width="250" height="175" ALT="Exterior View of 750 4th Concession Road, Walsingham">

750- 4th CONCESSION ROAD, SOUTH WALSINGHAM This farm is located 5 miles from Long Point Bay. Features

3 bedroom brick ranch with life long lease on it, 2nd dwelling has 2 bedrooms & one bath. 99 Acres total with 76 acres of good sandy

loam soil in 2 fields, 2 dams for irrigation. Outbuildings include heated greenhouse, 2 storey barn, quonset hut, 7 standard kilns.

Asking: 499,000 mls 

<img src="anseeuwsecondhouse.JPG" border="1" ALT="Second House" width="100" height="80" onmouseover="newImg('anseeuwsecondhouse.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

<img src="anseeuwbarn.jpg" border="1" ALT="Barn" width="100" height="80" onmouseover="newImg('anseeuwbarn.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

<img src="anseeuwpond.jpg" border="1" ALT="Pond" width="100" height="80" onmouseover="newImg('anseeuwpond.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

<img src="anseeuwquonsethut.jpg" border="1" ALT="Quonset Hut" width="100" height="80" onmouseover="newImg('anseeuwquonsethut.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

<img src="anseeuwfields.jpg" border="1" ALT="Fields" width="100" height="80" onmouseover="newImg('anseeuwfields.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

<img src="anseeuwgreenhouse.jpg" border="1" ALT="Greenhouse" width="100" height="80" onmouseover="newImg('anseeuwgreenhouse.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

<img src="anseeuwpackbarn.jpg" border="1" ALT="Pack Barn" width="100" height="80" onmouseover="newImg('anseeuwpackbarn.jpg');" onmouseout="newImg('anseeuwexterior.jpg');">

 

(Hold mouse over thumbnail picture to view larger version of it)

@teekaauthorMar 18.2006 — #teeka:

Would code for opening a "floating, trailing" image onmouseover of the thumbnail interest you?

So long as the user is hovering over the thumbnail image, a larger image "floats" over the page and tracks the movement of the mouse.[/QUOTE]

Sounds interesting, but would not work for my page. Thanks anyways!

@phpnoviceMar 18.2006 — #Replace the function as I outlined. Then change this:

<img src="gravesbackyard.jpg" border="1" ALT="Backyard" width="100" height="80"

onmouseover="newImg('gravesbackyard.jpg');" onmouseout="newImg('gravesexterior.jpg');">

to this:

<img src="gravesbackyard.jpg" border="1" ALT="Backyard" width="100" height="80"

onmouseover="newImg('gravesbackyard.jpg'[COLOR=Red][B],[/B] 'bigImg'[/COLOR]);" onmouseout="newImg('gravesexterior.jpg'[COLOR=Red][B],[/B] 'bigImg'[/COLOR]);">

Also in #JavaScript _↴

Not a function ... why????????????????mouse event in FireFox vs IE A script that will download csv file and show it on a web page

Success!

Help @teeka spread the word by sharing this article on Twitter...

Tweet This

Help with Java Script Code for Images

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with Java Script Code for Images

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴