FUDforum: How To » Rollover Effects In HTML

Home » FUDforum » How To » Rollover Effects In HTML (How To Get Them Working In Script That Features Functionality)

Show: Today's Messages :: Polls :: Message Navigator

Rollover Effects In HTML [message #37082]

Thu, 03 May 2007 12:51

Dustin Kowalski

Messages: 62
Registered: August 2006
Location: Leicester

Karma: 0

Member

My forum is pretty heavily customised now, but there's one problem that's causing me an issue, and I'll need some advice from somebody with programming experience, if anybody's feeling helpful please

I've completely redesigned the formatting tools. This is what they look like:

http://www.jeb.org.uk/~fletch/JEB%20Forum%20Graphics/Templates/Formatting%20Tools%20-%20Gen2/Formatting%20Tools%20-%20Gen2%20copy.jpg

I've loaded everything into my post_common.tmpl and it's displaying fine, all the Java is fine. If people click on 'Spoiler', it enters the correct tags, and so on for every function.

The only problem is ... rollover effects. The pure HTML from the designing works fine, so that if I hover over the image tag (

http://www.jeb.org.uk/~fletch/JEB%20Forum%20Graphics/Templates/Formatting%20Tools%20-%20Gen2/images/b_image.gif

) it changes appearance to

http://www.jeb.org.uk/~fletch/JEB%20Forum%20Graphics/Templates/Formatting%20Tools%20-%20Gen2/images/b_image-over.gif

.

However, I cannot incorporate these rollover effects into the template. I have rollover effects in other things which work fine, but these are hyperlinks in the forum heading rather than elements that use Java functions.

So, I need a quick pointer in the right direction, please. If we take the image tag as an example, what do I need to do? (The tag is b-image.gif. The OnMouseOver is b_image-over.gif.)

This is what the relevant part of my post_common.tmpl looks like:

<td class="FormattingToolsCLR"><a title="{MSG: post_common_image}" accesskey="m" href="javascript: image_insert();"><img alt="" src="http://www.jeb.org.uk/~fletch/JEB%20Forum%20Graphics/Templates/Formatting%20Tools%20-%20Gen2/images/b_image.gif" /></a></td>

So, I'd really, really appreciate any help that people could give me. As I said, everything is fine in that people can use the functions, but I'd absolutely love it for the rollover effects to be included, just to make things that little bit more personal.

If you can tell me how to change my script so that it works, please do!

Tim

Report message to a moderator

Re: Rollover Effects In HTML [message #37089 is a reply to message #37082]

Fri, 04 May 2007 00:01

Ilia

Messages: 13241
Registered: January 2002

Karma: 0

Senior Member
Administrator
Core Developer

You can add onMouseOver() event for the <img> tag that would alter this.src putting a url to a different image into place. onMouseOut() event can then be used to restore the original back.

FUDforum Core Developer

Report message to a moderator

Re: Rollover Effects In HTML [message #37102 is a reply to message #37089]

Fri, 04 May 2007 13:12

Dustin Kowalski

Messages: 62
Registered: August 2006
Location: Leicester

Karma: 0

Member

Ilia wrote on Fri, 04 May 2007 01:01

You can add onMouseOver() event for the <img> tag that would alter this.src putting a url to a different image into place. onMouseOut() event can then be used to restore the original back.

I think I know what you mean, Ilia.

Do I have to pre-assign functions and arrays in the head, or is it enough to insert something directly into the line of code for each image?

If this is the case, would you mind typing out an example using the code from above? How would this look different?:

<td class="FormattingToolsCLR"><a title="{MSG: post_common_image}" accesskey="m" href="javascript: image_insert();"><img alt="" src="http://myURL/dir/b_image.gif" /></a></td>

Thanks,

Tim

(User Phpreader needs banning; each post of his is spam.)

Report message to a moderator

Re: Rollover Effects In HTML [message #37133 is a reply to message #37082]

Tue, 08 May 2007 07:25

Ernesto

Messages: 413
Registered: August 2005

Karma: 0

Senior Member

http://www.thesitewizard.com/archive/rollovers.shtml

in the post_common.tmpl -> fud_code_icons you have to add backslashes to your 's ( \' ) or else it will not work I think

IE, to use the example from the webpage I linked you to:

Their code:

<a href="index.html"
  onmouseover="buttondown('homebutton')"
  onmouseout="buttonup('homebutton')">
<img src="homebutton.gif" name="homebutton" border="0" />
</a>

How you have to do it (I think):

<a href="index.html"
  onmouseover="buttondown(\'homebutton\')"
  onmouseout="buttonup(\'homebutton\')">
<img src="homebutton.gif" name="homebutton" border="0" />
</a>

Ginnunga Gaming

Report message to a moderator

Re: Rollover Effects In HTML [message #37245 is a reply to message #37082]

Tue, 15 May 2007 21:53

Dustin Kowalski

Messages: 62
Registered: August 2006
Location: Leicester

Karma: 0

Member

Thanks for taking the time to look that up for me, Ernesto. Unfortunately, I can't get it to work like that.

The thing is, I have absolutely no idea where I have to insert the OnMouseOver and OnMouseOut commands.

Does it follow the bit that reads: href="javascript: image_insert();"> ?

Or does it go after the letter 'src'? Whatever the correct answer is, I can't seem to get it right.

Ilia: If you can just tell me where to put it, I'll help you with design work for the forums, make a donation, whatever. I just want to get this working! Please, show me where to insert the mouse commands, and tell me what you want in return.

Thanks both of you