Tech: HTML mouseover

To Thread - Forum Home

The Mudcat Café ^TM
https://mudcat.org/thread.cfm?threadid=141080
19 messages

Tech: HTML mouseover

25 Oct 11 - 03:32 PM (#3244681)
Subject: Tech: HTML mouseover
From: SingsIrish Songs

There are so many discussions on HTML and I cannot find the HTML tag for a mouseover in any at this point.

What I want to do is create the box with text upon moving my mouse over an item. Ex. Making the "blue clicky" say "click here" in a box when the mouse moves over it.

Thanks!

25 Oct 11 - 03:36 PM (#3244682)
Subject: RE: Tech: HTML mouseover
From: Bert

It is done with javascript.

Take a look at www.newgatesknocker.com and view source.

25 Oct 11 - 04:36 PM (#3244703)
Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs

Finally found some HTML tags...

or

This may not work...

25 Oct 11 - 04:39 PM (#3244705)
Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs

LOL No it did't < acronym title= > or < a href =... title= >

25 Oct 11 - 04:40 PM (#3244706)
Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs

Thanks for the feedback, Bert.

25 Oct 11 - 05:05 PM (#3244725)
Subject: RE: Tech: HTML mouseover
From: GUEST,PeterC

Click here

<a href="http://www.mudcat.org" title="click here">Click here</a>

Technically this is not a mouseover, that does more complex things using javascript.

25 Oct 11 - 05:17 PM (#3244730)
Subject: RE: Tech: HTML mouseover
From: Jack Campin

The newgatesknocker page reacts to a mouseover on an image.

Is it possible to do a mouseover on a piece of HTML text?

25 Oct 11 - 05:44 PM (#3244749)
Subject: RE: Tech: HTML mouseover
From: Bert

I don't know, probably, but I just cut and pasted it from a javascript site. I guess, if push comes to shove you could always make an image of the text which is what I did with the buttons.

25 Oct 11 - 06:14 PM (#3244761)
Subject: RE: Tech: HTML mouseover
From: JohnInKansas

Note that the overuse of such gimmicks is one of the more obnoxious nuisances on the web. (IMO)

There are a few places where it may be appropriate, but do consider whether it really contributes to what you want people to think of your page. A link that just sits there and says "Click Here" works just as well in most places.

People who really want things that jump up, flash, and wiggle can always get a pinball machine (and probably already have one on their GameBoy).

John

25 Oct 11 - 06:15 PM (#3244763)
Subject: RE: Tech: HTML mouseover
From: treewind

Try hovering over this

It works for me. Nothing happens when you click on it, of course, because it's just a <SPAN> element.

Look up which elements can be used with the title= attribute. Most of them, I should think.

You can also use CSS to make the style (e.g. background colour) to change when the mouse is over it, again not needing any javascript.

25 Oct 11 - 06:19 PM (#3244766)
Subject: RE: Tech: HTML mouseover
From: Greg B

It's not an HTML tag per se. It's done with a JavaScript that is triggered by the "onmouseover" event parameter that is associated with the existing tag. The JavaScript function, in turn, sets properties on something like a

which cause it to appear. You need a complementary event to trigger "onmouseout" which causes the bubble to disappear.

25 Oct 11 - 06:24 PM (#3244768)
Subject: RE: Tech: HTML mouseover
From: GUEST,Grishka

The CSS language item "a:hover" may do what you are asking for. It without javascript, but not inline. Easy to google.

25 Oct 11 - 07:07 PM (#3244790)
Subject: RE: Tech: HTML mouseover
From: Bert

You're right John. Overuse of gimmicks is one of the worst things about the web.

But having a button change color when you are over it is fairly mild and unobtrusive, and it reinforces your position on the page.

The same mechanism can be used to enlarge an image if you like. These don't interfere with the use of the website and liven it up just a little.

I also hate things jumping around or websites that do things without being asked, but you don't want your websites too dull. All design is some sort of compromise and the designer has to be the one to draw the line.

25 Oct 11 - 07:16 PM (#3244800)
Subject: RE: Tech: HTML mouseover
From: Jack Campin

What I want to do is play a MIDI when the mouse hits a particular text element (no clicking). Can CSS alone do that?

The text will be preformatted and in a fixed-width font, but if I have to convert it all to images and count pixels I'll never get it done.

26 Oct 11 - 01:59 PM (#3245153)
Subject: RE: Tech: HTML mouseover
From: treewind

I don't think there's any way to get CSS to play a MIDI file, not even with the "content" attribute. That looks like a job for Javascript (good luck! I use it as little as I can)

---
What I consider a good use of the hover pseudo-class is something like this (yeah, I would say that, the web site is part of my day job) where the table row is highlighted when the mouse is over it. I was surprised and delighted to find you could use "hover" on a <TR> element, having previously only ever used it on links.

The links turning blue and getting underlined is all controlled by the same hover pseudo-class on a table row combined with an <A> element.

26 Oct 11 - 03:43 PM (#3245209)
Subject: RE: Tech: HTML mouseover
From: Jim Dixon

I hate it when people tell me click here without telling me what will happen if I click it. Maybe I don't want to click it—for instance, I don't want to wait to download a 50-page PDF or a 10-minute video if I happen to be on a slow internet connection. Or maybe I don't want to click something that will start playing music, because I'm using my laptop in a public library and I don't have my earphones plugged in. Most often, I just don't want to waste my time clicking links if the information given there simply isn't useful to me.

If titles can be used intelligently to tell me what a link is for before I click it, I'm all for it.

Of course, the same information can be given in the text, but that might just clutter up the page with information that is useless to most users.

Titles might be useful if you want to fit lots of links very compactly into a small space, like, for example, at refdesk.com.

Like this:

Music news: Minneapolis – St. Paul – Duluth – Rochester – [etc.]

(Hey, I'm not sure these links will work. If not, I'll fix them later.)

27 Oct 11 - 09:45 PM (#3245940)
Subject: RE: Tech: HTML mouseover
From: GUEST,Jon

That looks like a job for Javascript (good luck! I use it as little as I can)

I use a bit of it but I don't like it. I've spent all today trying to find a WYSIWIG editor to replace the TinyMCE one I'm using. One of my problems with that one is that formatting a section with pre does not result in text displayed with a fixed width font. So far I haven't found one that really works as I'd like.

Maybe I could write my own using an iFrame, maybe not but I'm sort of defeated before I even start as most code of more than a couple of lines I've ever looked at seems to have to go about things in different ways for different browsers - even for different versions of the same browser.

I gather a way round it is to use a framework like JQuery but I don't think want to get involved with that. Except I did look at Google Web Toolkit a couple of weeks ago. I installed that onto Eclipse, tried the demo. It all but locked my PC up for 15 minutes or more building the demo program and just it's presence slows everything else down when Eclipse is loaded - maybe 2Gb RAM isn't enough for it or maybe an Athlon 64 X2 6000 isn't up to the job. I don't know but I don't want to upgrade my PC at the moment.

28 Oct 11 - 02:50 PM (#3246219)
Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs

Great feedback. Thanks!

"Hover" would be a more accurate description of what I was looking for. All I could think of was "mouseover".

I wanted some different tags to use for a simple webpage project for my computer course. It was successful.

Here's a helpful tutorial page for versions of HTML, CSS and others...
w3schools