OnMouseOver Not Working?

by ANGrey April 18th 2013, 11:12 pm

Hi everyone.

I don't have a forum of my own, but I can contact the head admin of the forum in question if need be.

HTML is enabled (and in fact, encouraged) on the forum, but the onmouseover function isn't working at all. My code is as follows:

Code:: <a href="http://www.google.com/"><img src="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg" onmouseover="this.src:'http://blogs.discovermagazine.com/badastronomy/files/2010/11/black.jpg'" onmouseout="this.src:'http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg'"/></a>

by Sir. Mayo April 19th 2013, 12:14 am

I have no idea What your trying to do with Three links there but i dont think you can have it display two different things on each mouse over. But i could be wrong.

by Sir. Mayo April 19th 2013, 12:16 am

You have on mouse twice idk why but i got this so far

Code:: <a href="http://www.google.com/"><img src="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg" <span Title="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg"</span>

Use <span Title = ""> </span> Rather then onmouseover.

I think onmouseover is used in java. As well as Onmouseout

by ANGrey April 19th 2013, 12:58 am

That code has nothing to do with what I'm trying.

I'll explain the code.

<a href="http://www.google.com/"><img src="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg" onmouseover="this.src:'http://blogs.discovermagazine.com/badastronomy/files/2010/11/black.jpg'" onmouseout="this.src:'http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg'"/></a>

This is a link to Google; I've never seen the code work without it linking to something.
This is the original image link, and what it appears as normally.
This sets it so that when the mouse is hovering over the image, the source of the image changes to this link.
This sets it so that when the onmouseover works, it sets it BACK to the original image when the mouse is moved off of the image.

by DustyBones April 19th 2013, 1:27 am

after the 2 image links, instead of '"
try using ';"

Also this code will not work in a post. The link to web site will work but not the mouse over. Why I don't know, I use that code in a widget and it works there fine.

by Sir Chivas™ April 19th 2013, 1:55 am

Hi,

Why don't you use CSS?
HTML:

Code:: <a class="myButtonLink" href="#LinkURL"><img src="img_URL.png" /></a>

CSS:

Code:: .myButtonLink { display: block; width: 100px; height: 100px; background: url('myImage.png') bottom; text-indent: -99999px; } .myButtonLink:hover { background-position: 0 0; }

by **SLGray** April 19th 2013, 4:11 am

Sir. Mayo wrote:I have no idea What your trying to do with Three links there but i dont think you can have it display two different things on each mouse over. But i could be wrong.

Sir. Mayo wrote:You have on mouse twice idk why but i got this so far
Code:
<a href="http://www.google.com/"><img src="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg" <span Title="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg"</span>

Use <span Title = ""> </span> Rather then onmouseover.

I think onmouseover is used in java. As well as Onmouseout

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!

by ANGrey April 19th 2013, 4:20 am

Adam's not keen on adding things to the CSS. Is there a way to do it strictly with HTML?

by Jophy April 19th 2013, 11:03 am

Calιbuяn wrote:Adam's not keen on adding things to the CSS. Is there a way to do it strictly with HTML?

He will just add it here:
Admin Panel > Display > Colors > CSS Stylesheet:
Add the code at the bottom
> Save

by Mati April 19th 2013, 12:59 pm

Use this code:

Code:: <a href="http://www.google.com/"><img border="0" src="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg" onmouseover="this.src='http://blogs.discovermagazine.com/badastronomy/files/2010/11/black.jpg';" onmouseout="this.src='http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg';"></a>

by ANGrey April 21st 2013, 4:05 am

Jophy wrote:
Calιbuяn wrote:Adam's not keen on adding things to the CSS. Is there a way to do it strictly with HTML?
He will just add it here:
Admin Panel > Display > Colors > CSS Stylesheet:
Add the code at the bottom
> Save

We know HOW to do it. Adam doesn't want to add anything to the CSS. That's not an option.

Matti_7 wrote:Use this code:

Code:
<a href="http://www.google.com/"><img border="0" src="http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg" onmouseover="this.src='http://blogs.discovermagazine.com/badastronomy/files/2010/11/black.jpg';" onmouseout="this.src='http://g-ec2.images-amazon.com/images/G/01/th/aplus/hunterfan/B003IPCYN0-White-Blade.jpg';"></a>

Did not work D:

by Sir Chivas™ April 21st 2013, 7:14 pm

So pure HTML?

Code:: <a class="myButtonLink" href="#LinkURL"><img src="img_URL.png" /></a> <style type="text/css"> .myButtonLink { display: block; width: 100px; height: 100px; background: url('myImage.png') bottom; text-indent: -99999px; } .myButtonLink:hover { background-position: 0 0; }</style>

by runawayhorses April 22nd 2013, 3:03 am

You can do a mouseover image link with javascript, that would be like this:

You have 2 images, one is the mouseover image and the other is the static image.

Add this near the top of the page in the body tags so it loads first, this is the mouseover image that will be preloaded so when you hover over the image is will show fast because its already loaded:

Code:: <SCRIPT LANGUAGE="JavaScript"> image1 = new Image(); image1.src = "URL OF MOUSEOVER IMAGE GOES HERE"; </script>

Place this code where you want the image link to show:

Code:: <a href="LINK DESTINATION URL" onmouseover="image1.src='MOUSEOVER IMAGE URL';" onmouseout="image1.src='STATIC IMAGE URL';"> <img name="image1" src="STATIC IMAGE URL" title="TITLE HERE" border=0></a>