Having trouble assigning hyperlinks to .gifs that become visible through .toggle

Having trouble assigning hyperlinks to .gifs that become visible through .toggle

Hi everyone, new to jquery and the forum and even quite inexperienced with html.

So, I have this code:

  2. <head> 
  3. <title>Title</title> 
  4. <meta http-equiv="Content-Type" content="text /html; charset=UTF-8" /> 
  5. <link rel="stylesheet" type="text/css" href="mystyle.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
  7. <script type="text/javascript">
  8.   $(document).ready(function(){
  9.    $('p a img').each(function(){var path = $(this).attr('src').slice(0,-4);
  10.   $(this).toggle(function(){
  11.   $(this).attr('src',path + '-hover.gif'); 
  12.   $('p.link').html('<img src="' + path + '-text.gif" alt="" />');},
  13.   function(){
  14.   $(this).attr('src',path + '.gif');
  15.   $('p.link').html('<img src="_img/buttons/dummy.gif" alt="" />');});
  16.   });
  17.   });
  18.   </script> 
  19. </head> 
  20. <body>
  21. <h1>Title</h1>
  22. <p>
  23. <a href="#"><img src="_img/buttons/home.gif" alt="Home" /></a>
  24.                 <a><img src="_img/buttons/mail.gif" alt="Mail" /></a>
  25. </p>
  26. <p class="link">
  27. <img src="_img/buttons/dummy.gif" alt="" />
  28. </p>
  29. </body> 

My problem: I want to make the "mail-text.gif"s that becomes visible through clicking on the "mail.gif" a hyperlink and also have the option to add further ".gif"s and make the corresponding "-text.gif"s hyperlinks.
As long as there is only the "mail.gif" and no "home.gif" or other, I can solve this by changing

  1. $('p.link').html('<img src="' + path + '-text.gif" alt="" />');
into
  1. $('p.link').html('<a href="mailto:mail@mail.com"><img src="' + path + '-text.gif" alt="" />');
or
  1. $('p.link').html('<a href="mailto:mail@mail.com"><img src="_img/buttons/mail-text.gif" alt="" />');

From here on, I do not have much of a clue what to try next.

I have two other questions that are currently low priority and thus optional:
  • b. What does the .slice(0,-4) do in this case?
  • c. Is there an easy way do add a hover to the 'p a img' that would work on a pc and not screw up the rest on a touch device?
Thank you very much!