Lyrics & Knowledge Personal Pages Record Shop Auction Links Radio & Media Kids Membership Help
The Mudcat Cafemuddy

Post to this Thread - Sort Descending - Printer Friendly - Home


Tech: HTML mouseover

SingsIrish Songs 25 Oct 11 - 03:32 PM
Bert 25 Oct 11 - 03:36 PM
SingsIrish Songs 25 Oct 11 - 04:36 PM
SingsIrish Songs 25 Oct 11 - 04:39 PM
SingsIrish Songs 25 Oct 11 - 04:40 PM
GUEST,PeterC 25 Oct 11 - 05:05 PM
Jack Campin 25 Oct 11 - 05:17 PM
Bert 25 Oct 11 - 05:44 PM
JohnInKansas 25 Oct 11 - 06:14 PM
treewind 25 Oct 11 - 06:15 PM
Greg B 25 Oct 11 - 06:19 PM
GUEST,Grishka 25 Oct 11 - 06:24 PM
Bert 25 Oct 11 - 07:07 PM
Jack Campin 25 Oct 11 - 07:16 PM
treewind 26 Oct 11 - 01:59 PM
Jim Dixon 26 Oct 11 - 03:43 PM
GUEST,Jon 27 Oct 11 - 09:45 PM
SingsIrish Songs 28 Oct 11 - 02:50 PM
GUEST,Jon 28 Oct 11 - 03:25 PM
Share Thread
more
Lyrics & Knowledge Search [Advanced]
DT  Forum
Sort (Forum) by:relevance date
DT Lyrics:





Subject: Tech: HTML mouseover
From: SingsIrish Songs
Date: 25 Oct 11 - 03:32 PM

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!


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Bert
Date: 25 Oct 11 - 03:36 PM

It is done with javascript.

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs
Date: 25 Oct 11 - 04:36 PM

Finally found some HTML tags...



or



This may not work...


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs
Date: 25 Oct 11 - 04:39 PM

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs
Date: 25 Oct 11 - 04:40 PM

Thanks for the feedback, Bert.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: GUEST,PeterC
Date: 25 Oct 11 - 05:05 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Jack Campin
Date: 25 Oct 11 - 05:17 PM

The newgatesknocker page reacts to a mouseover on an image.

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Bert
Date: 25 Oct 11 - 05:44 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: JohnInKansas
Date: 25 Oct 11 - 06:14 PM

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: treewind
Date: 25 Oct 11 - 06:15 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Greg B
Date: 25 Oct 11 - 06:19 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: GUEST,Grishka
Date: 25 Oct 11 - 06:24 PM

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Bert
Date: 25 Oct 11 - 07:07 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Jack Campin
Date: 25 Oct 11 - 07:16 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: treewind
Date: 26 Oct 11 - 01:59 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: Jim Dixon
Date: 26 Oct 11 - 03:43 PM

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: MinneapolisSt. Paul – Duluth – Rochester – [etc.]

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: GUEST,Jon
Date: 27 Oct 11 - 09:45 PM

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.


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: SingsIrish Songs
Date: 28 Oct 11 - 02:50 PM

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


Post - Top - Home - Printer Friendly - Translate

Subject: RE: Tech: HTML mouseover
From: GUEST,Jon
Date: 28 Oct 11 - 03:25 PM

I think the JavaScript event, if you were to do things things that way, is onMouseOver.

------
I've given up with my rich text box search btw. I don't seem to be able to find one which is quite right... Oh well, have fixed a couple of problems and got threads attempting to detect abc so posting something like this:

X:1
T:Paddy O'Rafferty
C:Trad.
M:6/8
K:D
dff cee | def gfe | dff cee | dfe dBA |
dff cee | def gfe |faf gfe |1 dfe dBA:|2 dfe dcB |]
~A3 B3 | gfe fdB | AFA B2c | dfe dcB |
~A3 ~B3 | efe efg |faf gfe |1 dfe dcB:|2 dfe dBA |]
fAA eAA | def gfe | fAA eAA | dfe dBA |
fAA eAA | def gfe |faf gfe | dfe dBA:|

can (browser, edit control, etc. permitting...) produce this which is a bit better...


Post - Top - Home - Printer Friendly - Translate
  Share Thread:
More...

Reply to Thread
Subject:  Help
From:
Preview   Automatic Linebreaks   Make a link ("blue clicky")


Mudcat time: 24 June 7:57 AM EDT

[ Home ]

All original material is copyright © 1998 by the Mudcat Café Music Foundation, Inc. All photos, music, images, etc. are copyright © by their rightful owners. Every effort is taken to attribute appropriate copyright to images, content, music, etc. We are not a copyright resource.