Hovering For More
simple // ur most basic layout tutorials thread
The title itself is pretty self-explanatory already so...
let's start?
I've been seeing a lot of shops do this for a while now and after struggling for a bit (orz), I have figured out how to hover something for more information.
The only thing you really need to learn in this tutorial is the attribute (refer to "Important HTML Words") 'title'.
I will be showing three examples.
*Do not forget to remove spaces after every "<" and before every ">" in examples in order for them to work properly.
Example:
< p >
< span style="font-family: times new roman; font-size: 70px; color: #4f4f4f;"/ >•< /span >
< /p >
•
As you can see, when you hover the circle above, there's nothing that pops up.
Example:
< p >
< span style="font-family: times new roman; font-size: 70px; color: #4f4f4f;" title="add something here"/ >•< /span >
< /p >
•
Now when you hover it, there'll be something there. Just add whatever you want inside the quotes after the 'title' attribute and you'll be able to see it when hovering the certain object.
Example 2:
< p >
< img src="http://i1307.photobucket.com/albums/s587/MagicalDreams1/PNGs/MissACropped_zpsdc8f78f8.png" style="height: 167px; width: 200px;"/ >< /p >
Same thing as before. When hovering it, there's nothing.
Example:
< p >
< img src="http://i1307.photobucket.com/albums/s587/MagicalDreams1/PNGs/MissACropped_zpsdc8f78f8.png" style="height: 167px; width: 200px;" title="miss a"/ >< /p >
Example 3:
< p >
< span style="font-family: times new roman; font-size: 12px; color: #96B6E8;"/ >insert text here< /span >< /p >
insert text here
There's no need to explain any further.
Example:
< p >
< span style="font-family: times new roman; font-size: 12px; color: #96b6e8;"/ >insert < span title="add what you want to say here or whatever"/ >text< /span > here< /span >< /p >
insert text here
Hover the word "text" to see the 'message'.
Basically, I made 3 examples so that I wouldn't be getting questions like, "does this work for pictures?" or something along those lines and the last tutorial was to show that you can apply this to only one word if you want to. You just have to end it when you want it to end.
Comments