HTML Span?

Question

I know somewhere I found info about how to make a strip of text and it's surrounding area clickable by using some sort of Span command?

Can someone tell me how to use it and if possible, can the area around the text be a different colour AND change colour when the mouse is over it?

Thanks!

Answer 1

First, if you want to make a link, you should use the anchor element, not a span or any other element. Let's do things correctly :)

quick example:

HTML:

My Text

CSS:

.button {
padding: 20px; /* create a 20 pixels wide area around your text */
background-color: red; /* set button area color */
color: black; /* set text color */
}
.button:hover {
background-color: blue; /* :hover means when move is over */
color: inherit; /* reuse same color -optional but good practice to define it */
}

there you have a red box with 'My Text' written in black in it. Move your move over the button and the box color will change to blue.

Answer 2

you can do it with just a span by throwing an onclick='javascriptfunction',

to color it differently you need css. throw in a style="color:red"

so you have this is red

the javascript might set document.location to a url

when that becomes tiring, you can also do it with advanced dom manipulation and then the html becomes
this is red
and the javascript gets more exciting!