|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
February 24th, 2005, 12:40 PM
|
|||
|
|||
|
Provide Description of an item on page when mouse pointer on
how can I do this?
Let's say when I move my mouse pointer to an image or a hyperlink. It should pop up a note that displays the description of that image or that hyperlink. <A href="http://www.mywebsite/test.asp"> <img src="http://www.mywebsite/nose.jpg"></a> Where do I put that function in???
__________________
If you have discus home and like to share your expertize with others. Please join us at NYC-DiscusFanatics.com. NYC-DiscusFanatics.com is a helpful discus website based in NYC. It consists of forums, gallery, discus breeder central and search engines, etc.
|
|
#2
February 24th, 2005, 12:44 PM
|
||||
|
||||
|
This would include dHTML and response to the onMouseOver and onMouseOut events. As these are pure HTML/dHTML/JavaScript issues, I'm moving this thread to the correct forum
__________________
selwonk If I've posted some code above, you might think it looks a bit simplistic. It might be. I'd rather people tried the next step themselves rather than getting a full solution on a plate. That way they learn more!
|
|
#3
February 24th, 2005, 01:24 PM
|
||||
|
||||
|
you can also use the title and alt attributes:
Code:
<a href="http://www.mywebsite.com/test.asp" title="my description"> <img src="http://www.mywebsite.com/nose.jpg" alt="my alt text" /> </a> FYI - you should also use width and height in the <img> element
|
|
#5
February 24th, 2005, 03:43 PM
|
||||
|
||||
|
alt is an attribute of the <img ... /> element. It is supposed to be used as a replacement for the image for people who can't see and are using a text reader for their web browser. IE does renders alt as a tool tip when you hover the mouse over an image. Most other browsers render the title attribute of the <a> element as a tool tip. Does that make sense?
|
|
#6
February 24th, 2005, 08:18 PM
|
||||
|
||||
|
the code you need is like this, as banker said:
Code:
<a href="<%=rs("URL")%>" title="<%=rs("Descriptipn")%>">
<img src="<%=rs("image")" /></a>
assuming all the data is coming from database. if the image is the link, the title would appear as tooltip when the mouse will be over it in all modern browsers.
|
|
#8
February 25th, 2005, 02:08 PM
|
||||
|
||||
|
Apathy! Ignorance! FrontPage! By your powers combined! I am WebStandardsMan!
o/~ WebStandardsMan, he's a hero! Gonna take Internet Explorer down to zero! He's the W3C... personified and he's fighting for the standards side! I'm a WSG member! You can be one too! 'cause writing semantic code is the thing we do! FrontPage and HTML4.01 Transitional is not the way! Here's what WebStandardsMan has to say! The power to write semantic code is YOURS! o/~ </Blatent Captain-Planet Rip> Anyway.... IRT the whole thread: The XHTML1.0 spec (well, the HTML4 spec started it off) is pretty clear that the global element attribute "title" is to be used for all extraneous information, it recommends that visual UAs render them as tooltips. Therefore, got an image and want to give it a tooltip? Use Code:
<img src="#" title="Hello" /> Likewise, you can give your whole document a tooltip: Code:
<body title="Hello!" xml:lang="en"> As I said, its a global attribute, so you can use it on ANY element (or as evil do'ers call them... "tags") However! There is a limitation, unfortunatley. You cannot have linebreaks in tooltips (Well, you can, but it isn't recommended as rendering accross platforms is inconsistent) Instead, use of ECMAScript w/ W3C DOM Level 1 is recommended. Create a division element (<div>) and fill it with your "popup" content and use the universal onMouseOver event to display (display: block; ) and position (position: absolute; ) Well, that's my work here done! Remember kids! The power to write semantic, standard, and accessible code is YOURS! *disolves into the ground*
|
|
#9
February 25th, 2005, 09:49 PM
|
||||
|
||||
|
LOL
that was quite a show!! made my night! 
|
|
#10
February 25th, 2005, 10:20 PM
|
||||
|
||||
|
Quote:
I'd be interested in a tutorial on this, do you know where I could find one?
|
|
#11
February 26th, 2005, 09:50 AM
|
||||
|
||||
|
Here's the XHTML, get ShadowWizard to give you the ECMAScript w/ W3C DOM:
XHTML Code:
<img id="imgX" src="images/someimage.png" alt="A picture containing randomness" title="" /> <div id="imgXextra" class="extrainfo"> <p>Put all your extra info here</p> </div> (where "X" is some unique number shared between the two elements) CSS Code:
img { border: none; }
.extrainfo { display: none; }
.extrainfovisible { display: block; position: absolute; border: 1px solid black; background: white; }
ECMAScript (may be buggy, get SW to go over it) Code:
<somecode to detect mouseover on id="img" + X + "" elements.>
.onmouseover = function {
imgX.classname = "extrainfovisible";
imgX.style.top = mouseY(); // I don't know the DOM well, but I'm guessing that there's some way to getting the current mouse position
imgX.style.left = mouseX();
}
....Something like that  Oh, and note the semantic classnames, "tooltip" is more platform specific than "extrainfo", which is what it is. Rather than "tooltip" which is how you intend it to be displayed.
|
|
#12
February 26th, 2005, 10:20 AM
|
||||
|
||||
|
yes the logic is correct, as for the code... well, it's not so simple. first, you have to use two events: mouseover to show the details and mouseout for hiding them. and badly enough, to get mouse position you have different code for IE and for Firefox... I've solved all this and using something that is cross browser, it's in my office so I'll take a look tomorrow and post it here.
|
|
| Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > Provide Description of an item on page when mouse pointer on |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
