Search code examples
javascriptwordpressonmouseoveronmouseout

OnMouseOver / OnMouseOut

I'm using the onMouseOver and onMouseOut function to change the colour of some social media icons in the footer of my Wordpress website: http://www.retelevise.com.

It works fine, but I'm also using a snippet of Javascript for the link to my email address (I read somewhere this is a good way to hide the address from spammers?) – but the Javascript doesn’t seem to like the mouse function.

<script type="text/javascript">
<!--
var addr1 = "mailto:"
var addr2 = "info"
var addr3 = "@"
var addr4 = "retelevise"
var addr5 = ".com"
document.write('<a href="' + addr1 + addr2 + addr3 + addr4 + addr5 + '">')
document.write('<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png" onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-2.png'" onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png'" class="social-icons-main" title="Email" alt="Email"></a>'); 
//-->
</script>

If I remove the mouse function, only the grey email icon appears without switching to the color version on hover, but when I try adding the mouse code, the email icon disappears altogether. I did look at some similar answers posted here, but sorry I didn't understand them. Does anybody have any ideas, please?

Thanks, SN.

Solution

  • There is no escaping of single quotes used within a single quoted value.

    http://jsbin.com/nakoduqa/1/edit

    var addr1 = "mailto:"
var addr2 = "info"
var addr3 = "@"
var addr4 = "retelevise"
var addr5 = ".com"
document.write('<a href="' + addr1 + addr2 + addr3 + addr4 + addr5 + '">')
document.write('<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png" onmouseover="this.src=\'http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-2.png\'" onmouseout="this.src=\'http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png\'" class="social-icons-main" title="Email" alt="Email"></a>');