Cursor Roll Over [Archive] - CodingForums.com

silver163

03-24-2009, 06:31 PM

Hello,

I have created the following webpage:

http://www.naspos.com/HTML/features.html

In the table in the Features column I wanted to create it so that if the user rolls over with the cursor over the text a yellow box shows up to the left side and describes a little bit about the feature. How can I create this?

TinyScript

03-24-2009, 07:02 PM

<html>
<head>
<title>CSS Mouseover</title>
<style type="text/css">
div#mouse a {text-decoration: none; }
div#mouse a:hover { border-right: 0 none ; }
div#mouse a span {display: none; }
div#mouse a:hover span {display: block;background-color:yellow;width:100px; }
</style>
</head>
<body>
<div id="mouse">
<a href="">Text<span>More Text</span></a>
</div>
</body>
</html>

silver163

03-24-2009, 07:16 PM

where do i put the descriprtive text into that box?

TinyScript

03-24-2009, 08:05 PM

That's just a simple example to show you how it's done. You'll need to follow the pattern for your links. You could also try to google for exactly what you're looking for. Odds are, someone has done it before

TinyScript

03-24-2009, 08:07 PM

Oh to answer your question, the area bewteen the quotes where it says more text is the hidden text. That's where you put the description.

Hey, look up javascript tooltips and you'll find what you need.
here's a great script
http://sandbox.leigeber.com/tooltip/

VIPStephan

03-24-2009, 08:10 PM

Well, actually an anchor element isn’t the best approach here as it’s not semantic at all. Why is there a link? Is it linking anywhere? If not then a link is just wrong. And it’s not right as well to just use an anchor because it works in IE 6.

I may annoy some people with it but I can only and repeatingly call on developers to write semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/) using progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) (which partly takes graceful degradation into account) to develop websites.

In this special case it wouldn’t be much different than what TinyScript already suggested but you wouldn’t use an anchor but a division for example, and another division for the additional descriptive text. You can then still use CSS to hide it and make it appear on mouseover. Only IE 6 won’t be right for which we’d use unobtrusive JavaScript (http://onlinetools.org/articles/unobtrusivejavascript/) (or not hide it at all in the first place).

I cant go more into detail at the moment because I’ve gotta run. Don’t hesitate to ask if you have more questions.

silver163

03-26-2009, 06:52 PM

Fumigator

03-27-2009, 08:28 PM

Well, actually an anchor element isn’t the best approach here as it’s not semantic at all. Why is there a link? Is it linking anywhere? If not then a link is just wrong. And it’s not right as well to just use an anchor because it works in IE 6.

VIP-- I agree with you, anchors should not be misused. What tag would you use, then, for an Ajax application that contains a bunch of hot spots (images or text) that when clicked should update a <div> dynamically? I can use jQuery selectors to catch a click on just about any kind of element, but what would be the semantically correct element to use?

VIPStephan

03-28-2009, 01:23 AM

VIP-- I agree with you, anchors should not be misused. What tag would you use, then, for an Ajax application that contains a bunch of hot spots (images or text) that when clicked should update a <div> dynamically? I can use jQuery selectors to catch a click on just about any kind of element, but what would be the semantically correct element to use?

Good that you ask that, Fumigator, because I like to share my knowledge. :)

Basically the first thing you should ask yourself is: What should the visitor see if they don’t have JS and/or CSS enabled. The result of this question is important for the approach you take on this.

In a nutshell: if an element wouldn’t have any function by itself, only through application of JS, then it shouldn’t be hard coded in the HTML but rather be generated by JavaScript. For example a “print page” link with window.print() JS function wouldn’t have any use if JS was disabled so there’s no reason to display it in the first place, hence, the correct way would be to generate it with JS as well so it only shows up if JS is available.

Same principle applies to your application where hotspots can be anchor elements if they are linking something (can be span elements as well, if an anchor doesn’t apply, since they are semantically neutral) but they shouldn’t be present in the first place if JS is disabled and they don’t have any other purpose.

I hope I could make myself clear? It’s a little hard to describe in words.

Fumigator

03-28-2009, 05:33 AM

Well, I'm prototyping a browser-based game, which has a very simple graphical interface. The playing field is made up of hexagons, with a 8-direction tool for moving the view around (see attached image). Right now I'm using an image map, which is just a fancy multi-anchor tag. It won't validate without the href attribute, but I don't want to "go" anywhere, I just want to update the contents of the playing field via an ajax call.

In this case, if JS is disabled I want the user to see a page that says "you must enable JS to play this game."

I guess another option would be to use <input type="image">, as come to think of it, the x/y mouse coordinates are recorded so I could use just one image and button. Or is there another way that is better?

Another application for this would be a something similar to a phpMyAdmin page where there's a table with multiple rows and action icons for each row (edit, delete, print, etc). Only I am using Ajax to handle the tasks.... I guess I will create these icons using JS so they don't ever exist if JS is disabled. But would using an <a> tag be wrong?

VIPStephan

03-28-2009, 04:46 PM

Well, OK, in this case (browser game) semantics aren’t the most important things to take care of anyway because you’re not displaying a document where it’s important to understand the meaning even without any enhancements. So, since image maps are the only way to have polygon shapes I think it’s alright to use them here. And since the entire thing is heavily based on JavaScript and isn’t expected to work without anyway you can do that or the image type input.

For the PHPMyAdmin kind of application I think the edit and delete icons do have a purpose and should work without JS as well so hard coded anchors would be correct. If JS is disabled a plain PHP function would be executed and the page would be reloaded, and if JS is enabled the AJAX would do it on the fly without reloading the entire page. For the print icon it depends on what you want to print. If it’s just a part of the info and not the entire page then you could make a link (actual anchor) to a separate page displaying the content to be printed (so people can print it manually) and if JS is enabled people wouldn’t be redirected to that page (i. e. “return false”) but the action is executed right away through JS. That’s the most accessible approach and that’s progressive enhancement in all its beauty. :)

Fumigator

03-30-2009, 04:27 AM

That helps a lot... thank you. And at the same time, it creates more questions. I just started using Ajax and find it to be beneficial, but at the same time it seems like it derails "normal" page processing which presents a whole host of other issues. It's an interesting way to develop pages.