Member Avatar for Larrywaz 
<script type="text/javascript">
function moveover()
{
document.getElementById('image').width="1080";
document.getElementById('image').height="600";
}
function moveback()
{
document.getElementById('image').width="180";
document.getElementById('image').height="100";
}
</script>
</head>

<body>

<img id=image src=images/PCF10.jpg
onmouseover="moveover()"
onmouseout="moveback()"
width="180" height="100" />


<br />
<br>

<body>

<img id=image src=images/PCF94.jpg
onmouseover="moveover()"
onmouseout="moveback()"
width="180" height="100" />
<br />

</body>
</html>

I have a page with multiple small images posted that I want to rollover to bring up an enlarged version of the same image, I am using distinct code for each picture right now and it works just fine except for the fact that it requires 17 lines of code for each rollover. I would like to do something like I have laid out here but the variable stays locked on the first image file and only the small image of the second is displayed. If I roll over the second smallimage the first large image is didplayed.
I have looked all over the web and can't find something the will fit my circumstances. I am a relative newcomer to java so any help would definetly be appreciated. I have approximately 100 images I want use this with so 17 lines of code per seems complete overkill!
You can check ou my site at http://swiftboats.com and go to PCF 10 to see how my code works.

Thanks,

  • 2 Contributors
  • 9 Replies
  • 136 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

So, not sure exactly what you want, but what comes to mind is that you have an enlarged image say in the center of the screen with small images under it. as you mouseover the small images you want the large image in the center to show the pic you are hovering over?

If so, you can do this with one function and just pass arguments to the function so that within the function you change the source "src" attribute of the image element (<img/>) to chnage on the mouseover event. Is this what you were interested in doing?

Member Avatar for Larrywaz

I have the enlarged image upper left corner being placed right where the smaller image is. I can make this all work but using 100+ copies of these 17 lines of code seems a real waste. I am a relative newcomer to java and can't seem to get the call function and replacement of the variable image address to work.

Member Avatar for Larrywaz

I have both small and large versions of the images pinned in the same spot. I am trying to eliminate using 100+ copies of the first 17 lines of code into this page. I am a newcomer to Java and can't seem to get the call function and variable image ID to work correctly.

Member Avatar for Larrywaz

I also seem to be having some real problems with using this site!

Member Avatar for JorgeM

I took a look at your site, clicked on PCF 10 and I see your concept of hovering over the image to enlarge it.

I do not understand what you mean by a lot of overkill on code. I would assume that you have the JavaScript moveover and moveback functions defined once in the head section, then for each image, you call the same function. the only thing you need to do to reuse the same code is to assign each image its own ID, then pass this ID to your javascript code.

for example, modify the javascript as follows:

<script type="text/javascript">
function moveover(imgid)
 {
 document.getElementById(imgid).width="1080";
 document.getElementById(imgid).height="600";
 }
function moveback(imgid)
 {
 document.getElementById(imgid).width="180";
 document.getElementById(imgid).height="100";
 }
</script>

Then from each html image element, assign a unique ID and pass that ID to the javascript functions.

<img id='pcf94' src=images/PCF94.jpg 
 onmouseover="moveover('pcf94')" 
 onmouseout="moveback('pcf94')"
width="180" height="100" />

i also noticed that you had more than one opening <body> tag in your element. Go back and validate your code. There should only be one opening and one closing <body> tag in each document. You can use an online HTML validator to help you validate your code.

http://validator.w3.org/

Hope this helps...

Edited by JorgeM
Member Avatar for Larrywaz 
<!DOCTYPE html PUBLIC>
<html>

<head>
<title>RollOverTest</title>

<script type="text/javascript">
function moveover(id)
{
document.getElementById(id).width="1080";
document.getElementById(id).height="600";
}
function moveback(id)
{
document.getElementById(id).width="180";
document.getElementById(id).height="100";
}
</script>
</head>

<body>

<img id='pcf10' src="images/PCF10.jpg"
onmouseover="moveover('pcf10')"
onmouseout="moveback('pcf10')"
width="180" height="100" />
<br />
<br>

<img id='pcf94' src="images/PCF94.jpg"
onmouseover="moveover('pcf94')"
onmouseout="moveback('pcf94')"
width="180" height="100" />
<br />

</body>
</html>
Member Avatar for Larrywaz

I had to expirement a bit with your code as it did nothing when I tried it, the problem was the variable ID was "imgid" in your code and it needed to be only "ID". This solved the problem and the code works beautifully.
I had the right idea but just didn't have all the ducks lined up properly.

Thanks so much for your HELP, it is most appreciated!

Member Avatar for JorgeM

Glad to hear that you were able to work out the details!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.