Hypergurl HTML span tutorials. XHTML elements including span tag. Learn how to create HTML hover text, to add a background image to text. As well as how to highlight text, mouseover color text, or place alt tag on text.





Summary: XHTML SPAN tag is one of the most popular tags in the HTML language, allowing you to add some very special HTML span code and purposeful elements to your webpages including: HTML hover text, or adding a background image and mouseover effects.



HTML span tags and styles


<SPAN> </SPAN>

Here at Hypergurl, we think HTML span tags are pretty awesome. This is why! For starters, here are a few examples of what you can achieve with HTML SPAN tags.

You can highlight your text any color you like.

You can add colored text

You can add a background image to your text.

You can add what is like an "alt tag" to your text. Try the example below and hover your mouse over the text. This is really cool. (Sorry, doesn't work with all browsers.)

HOVER YOUR MOUSE HERE.

We can even do image mouseovers using this great span tag. Run your mouse cursor over the image. (Click Here for text mouseover.)

fig 1


Span HTML Styles

Now that you understand what can be achieved with HTML span tags, here are the codes for each particular event.

Mouseover span code

<span onMouseOver="document.pic1.src='bluepic2.gif'" onMouseOut="document.pic1.src='bluepic1.gif'"><img src="bluepic1.gif" height="40" width="100" name="pic1"></span>


Highlight text span code

You can highlight your text any color you like.

<span style="background-color: #FFFF00">You can highlight your text any color you like</span>


Span color - colored text span code

You can add colored text

<span style="color: red; font-size: 14pt">You can add colored text</span>


Adding a background image on text

You can add a background image to your text.

<span style="background-image: url(plainbgrnd.jpg)">You can add a background image to your text.</span>


Alt tag on text code


HOVER YOUR MOUSE HERE.

<span title="ISN'T THIS SOOOOOO COOL!"><b>HOVER YOUR MOUSE HERE.</b></span>


Alt tag on text link code

To add an alt tag to a text link would be like this:

<span><a href="index.html" title="this is so cool" target="_blank">Click Here For Hypergurl</a></span>


And to give you an example, hover your mouse over the link below. Note, don't click on it if you wish to stay on this page. I've noticed it works a little slower nowadays than it used to. However, it's still supported by most browsers.

Hover your mouse over this link for an example!


  bullet SITE SEARCH



Site design copyright 2000 - 2013 © Tanya Puntti Hypergurl.com