Differences

This shows you the differences between two versions of the page.

Link to this comparison view

hover [Y-m-d G:i] (current)
Line 1: Line 1:
 +====== Hover-Links via CSS ======
 +Hover links are links that do not reveal their link identity until you //touch// them.
 +
 +Example: <​html><​!-- bad code only avoid wiki midification! --><a href=""​ onmouseover="​style.textDecoration='​underline'"​ onmouseout="​style.textDecoration='​none'"​ style="​text-decoration:​none">​hover@hartwork.org</​a></​html>​
 +
 +Now it's time to decide whether you want to //​hoverize//​ all links or just a few.
 +
 +===== All links =====
 +In order to convert all links to hovers you have to modify the //<​a>//​ tag in the header - between //<​head>//​ and //</​head>//​ - by using Cascading Style Sheets (CSS):
 +
 +  <style type="​text/​css">​
 +    a:link { text-decoration:​none }
 +    a:hover { text-decoration:​underline }
 +  </​style>​
 +
 +===== Single links =====
 +To be able to modify single links you have to define a new class first.
 +After this you can assign it to a link. The class definition is placed in the header again:
 +
 +  <style type="​text/​css">​
 +    a.myclass:​link { text-decoration:​none }
 +    a.myclass:​hover { text-decoration:​underline }
 +  </​style>​
 +
 +Now you can assign it to a link:
 +
 +  <a href="​mailto:​hover@hartwork.org"​ class="​myclass">​
 +    hover@hartwork.org
 +  </a>
 +
 +
 +===== The wrong way =====
 +I have to admit that I created hover-links in a different, complicated way some time ago.
 +This way is not a real alternative. My idea was to work with the events //​onmouseover//​ and
 +//​onmouseout//​.
 +
 +This would result in the following code:
 +
 +  <a href="​mailto:​hover@hartwork.org"​
 +      onmouseover="​style.textDecoration='​underline'"​
 +      onmouseout="​style.textDecoration='​none'"​
 +      style="​text-decoration:​none">​
 +    hover@hartwork.org
 +  </a>
 +
 +The mass of code for ten text-only links reveals the disadvantages of this mothod.
 +Nevertheless it can be of great use for implementing Dynamic Images.