FUDforum
Fast Uncompromising Discussions. FUDforum will get your users talking.

Home » FUDforum » How To » Rollover Effects In HTML (How To Get Them Working In Script That Features Functionality)
Show: Today's Messages :: Unread Messages :: Show Polls :: Message Navigator
| Subscribe to topic | Bookmark topic 
Switch to threaded view of this topic Create a new topic Submit Reply
Rollover Effects In HTML [message #37082] Thu, 03 May 2007 08:51 Go to next message
Dustin Kowalski is currently offline  Dustin Kowalski   United Kingdom
Messages: 62
Registered: August 2006
Location: Leicester
Karma: 0
Member
add to buddy list
ignore all messages by this user
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 http://www.jeb.org.uk/forumoj/images/smiley_icons/WinkSmile.png

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
Re: Rollover Effects In HTML [message #37089 is a reply to message #37082] Thu, 03 May 2007 20:01 Go to previous messageGo to next message
Ilia is currently offline  Ilia   
Messages: 13241
Registered: January 2002
Karma: 0
Senior Member
Administrator
Core Developer
add to buddy list
ignore all messages by this user
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
Re: Rollover Effects In HTML [message #37102 is a reply to message #37089] Fri, 04 May 2007 09:12 Go to previous messageGo to next message
Dustin Kowalski is currently offline  Dustin Kowalski   United Kingdom
Messages: 62
Registered: August 2006
Location: Leicester
Karma: 0
Member
add to buddy list
ignore all messages by this user
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.)



Re: Rollover Effects In HTML [message #37133 is a reply to message #37082] Tue, 08 May 2007 03:25 Go to previous messageGo to next message
Ernesto is currently offline  Ernesto   Sweden
Messages: 413
Registered: August 2005
Karma: 0
Senior Member
add to buddy list
ignore all messages by this user
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>


Re: Rollover Effects In HTML [message #37245 is a reply to message #37082] Tue, 15 May 2007 17:53 Go to previous messageGo to next message
Dustin Kowalski is currently offline  Dustin Kowalski   Germany
Messages: 62
Registered: August 2006
Location: Leicester
Karma: 0
Member
add to buddy list
ignore all messages by this user
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 http://www.jeb.org.uk/forumoj/images/smiley_icons/Happy.gif
Re: Rollover Effects In HTML [message #37287 is a reply to message #37082] Fri, 18 May 2007 12:55 Go to previous messageGo to next message
Dustin Kowalski is currently offline  Dustin Kowalski   Germany
Messages: 62
Registered: August 2006
Location: Leicester
Karma: 0
Member
add to buddy list
ignore all messages by this user
Bump, just because my post was in the middle of all of that ridiculous spam by njgoogle.
Re: Rollover Effects In HTML [message #37334 is a reply to message #37287] Sun, 20 May 2007 10:22 Go to previous message
Dustin Kowalski is currently offline  Dustin Kowalski   Germany
Messages: 62
Registered: August 2006
Location: Leicester
Karma: 0
Member
add to buddy list
ignore all messages by this user
Dustin Kowalski wrote on Fri, 18 May 2007 17:55

Bump, just because my post was in the middle of all of that ridiculous spam by njgoogle.


Christ. Can we not ban njgoogle? This spamming is ridiculous.
Quick Reply
Formatting Tools:   
  Switch to threaded view of this topic Create a new topic
Previous Topic: Probationary Membership
Next Topic: Load tables from another site
Goto Forum:
  

-=] Back to Top [=-
[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Tue Dec 12 15:10:43 EST 2017

Total time taken to generate the page: 0.00766 seconds