Any HTML Java guru's out there

ahll · 16 October 2011 at 7:12PM

I have a wordpress website and I want to put some photos on there and when the cursor hovers over them I want to make the photos bigger.

I am on an html course at the moment and I have learnt how to create a table and put the photos in them. The is all set up and I have tried to do the hover code but some how it doesnt seem to work with multiple photos.

Does anyone know or have the code to allow me to enlarge the photos when hovered over ?

I have loaded a plugin but its done doing it how I want it to be so its back to trying to do the code myself (with help)....

Cheers

EchoLocation · 16 October 2011 at 7:29PM

When you say 'hover code', do you mean the onMouseOver HTML attribute? or are you trying to use the css a:hover pseudo class?

Check out http://www.w3schools.com/ for plenty of code examples, or just google 'javascript image swap'

Just to avoid any future confusion for you, Java and Javascript are two different things. This is Javascript you're dealing with here, Java is a very different coding language.

ahll · 16 October 2011 at 7:34PM

EchoLocation wrote: »

When you say 'hover code', do you mean the onMouseOver HTML attribute? or are you trying to use the css a:hover pseudo class?

Check out http://www.w3schools.com/ for plenty of code examples, or just google 'javascript image swap'

Just to avoid any future confusion for you, Java and Javascript are two different things. This is Javascript you're dealing with here, Java is a very different coding language.

Oh yeah it was javascript I had been trying to use and the

onMouseon and onmouseoff and onMouseOverfunctions. I look on there and have found it really good before and I got it working with one photo but then when I added another it wouldn't work right and I tried fidling with the code but didnt manage to get it working.

ahll · 16 October 2011 at 7:51PM

This is one of my attemps and I got it to work for 1 photo then problems when the 2nd was added

<html>
<head>
<script type="text/javascript">

function mouseOver()
{
document.getElementById("b1").src ="bigben.jpg";
}
function mouseOut()
{
document.getElementById("b1").src ="bigben100.jpg";
}
function mouseOver()
{
document.getElementById("b2").src ="tajM.jpg";
}
function mouseOut()
{
document.getElementById("b2").src ="tajM100.jpg";
}
</script>
</head>

<body>
<center>
<br>

<img border="1" src="bigben.jpg" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
<img border="1" src="tajM.jpg" id="b2" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>

ahll · 16 October 2011 at 8:00PM

I tried this one but the photo didn't change when the cursor went over it and I couldn't see where the problem was !

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<--
loadImage1=new Image();
loadImage1.src="tajM100.jpg";
staticImage1=new Image();
staticImage1.src="bigben100.jpg";//>
</script>
<title>Hover over photo</title>
</head>
<body>
<center>
<a href="#" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=StaticImage1.src;"><img name="image1" src="bigben100.jpg" border=1></a>
</body>
</html>

ahll · 16 October 2011 at 8:04PM

I tried this one but no image wa displayed...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head>
<title>Roll over and emlarge image</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script lanuage="Javascript">

</head>
<body>
<a href="#" onMouseOver = "imgOn('img1')" onMouseOut = "imgOff('img1')"><img src="bigben.jpg" 'boarder=0 name = "img1"/></a>/>
<a href="#" onMouseOver = "imgOn('img2')" onMouseOut = "imgOff('img2')"><img src="bigben.jpg" 'boarder=0 name = "img2"/></a>/>

</body>
</html>

steve1980 · 16 October 2011 at 8:11PM

It's not as easy just to insert Javascript into a Wordpress template as WP will call on anything between 5 and 10 files to read from.

EchoLocation · 16 October 2011 at 8:38PM

<html>
<head>
<script type="text/javascript">

function mouseOver1()
{
document.getElementById("b1").src ="bigben.jpg";
}
function mouseOut1()
{
document.getElementById("b1").src ="bigben100.jpg";
}
function mouseOver2()
{
document.getElementById("b2").src ="tajM.jpg";
}
function mouseOut2()
{
document.getElementById("b2").src ="tajM100.jpg";
}
</script>
</head>

<body>
<center>
<br>

<img border="1"  src="bigben.jpg" id="b1"  onmouseover="mouseOver1()" onmouseout="mouseOut1()" />
<img border="1"  src="tajM.jpg" id="b2"  onmouseover="mouseOver2()" onmouseout="mouseOut2()" />
</body>
</html>

You have duplicate named functions.
Rename them function mouseOver1() / function mouseOut1() and mouseOver2() / function mouseOut2() in both the script and the img attributes and it should work fine.

You also have redundant closing </a> tags.

How big are the photos when enlarged? It might be a better option to link the images as thumbnails to open in a new tab or window. If you must persist with the script option, and depending on how many images there are, you might want to add an image preload script in as well. Also, if you have a lot of images to swap then it'd be worth storing the scripts in a separate file rather that in the html doc.

ahll · 18 October 2011 at 12:12PM

For those intested I have come across online of html that does it so I can now do it for multiple pictures. The issue now is that when the mouse goes over a photo all the other ones move. Does anyone know how to keep the ones not selected anchored ? I am guessing if the selected photo could be opened into a little window of its own like on the site below.

The code is
<td><img src="bigben100.jpg" onmouseover="src='bigben.jpg'" onmouseout="src='bigben100.jpg'"></td>

Site Link Here

EchoLocation · 18 October 2011 at 3:02PM

ahll wrote: »

For those intested I have come across online of html that does it so I can now do it for multiple pictures. The issue now is that when the mouse goes over a photo all the other ones move. Does anyone know how to keep the ones not selected anchored ? I am guessing if the selected photo could be opened into a little window of its own like on the site below.

If you're not really that comfortable with scripting it's going to be a bit too fiddly to achieve what you want, just have the images as small thumbnails inside links and then use target="_blank" as a link attribute; this will open them in a new window...

<a href="bigben100.jpg" target="_blank"><img src="bigben100_THUMB.jpg" /></a>

...if you want to open the images in a 'sized' window, you can do this as well with a few lines of script.

ahll · 18 October 2011 at 3:36PM

EchoLocation wrote: »

If you're not really that comfortable with scripting it's going to be a bit too fiddly to achieve what you want, just have the images as small thumbnails inside links and then use target="_blank" as a link attribute; this will open them in a new window...

<a href="bigben100.jpg" target="_blank"><img src="bigben100_THUMB.jpg" /></a>

...if you want to open the images in a 'sized' window, you can do this as well with a few lines of script.

Yeah I have used _blank but I didnt want to go onto another page I just wanted to stay on the same page and have the photo enlarge on top of that page as it where.

I would be interested to see how you would script for the sized window though if you wouldn't mind sharing that.

Cheers

Any HTML Java guru's out there

Comments

Confirm your email address to Create Threads and Reply

🚀 Getting Started

Categories

Is this how you want to be seen?

Get our FREE Weekly email full of deals & guides - and it’s spam-free