Reputation: 915
I created a range of social media buttons which when the mouse hovers it switches to a different image (giving it a highlight effect). The images work as I want them to, however, I can't seem to figure out how to load the page into a new tab/screen. I need to implement the equivalent of .
Assuming I have to change something in the onClick.... ?
Here is code:
<div id="insidefooter">
<ul>
<li>
<div id="facebook" style="cursor:pointer;" onClick="window.location='https://www.facebook.com';"></div>
</li>
<li>
<div id="youtube" style="cursor:pointer;" onClick="window.location='https://www.youtube.com';"></div>
</li>
<li>
<div id="twitter" style="cursor:pointer;" onClick="window.location='https://twitter.com/';"></div>
</li>
</ul>
</div>
Here is CSS:
#facebook {
height: 40px;
position: relative;
top: 0px;
left: 260px;
width: 40px;
background-image:url(/img/index/footer/facebook-button.jpg);
}
#facebook:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/facebook-button2.jpg);
top: 0;
left: 260px;
width: 40px;
position: relative;
}
#youtube {
height: 40px;
position: relative;
top: -62px;
left: 360px;
width: 40px;
background-image:url(/img/index/footer/youtube-button.jpg);
}
#youtube:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/youtube-button2.jpg);
top: -62px;
left: 360px;
width: 40px;
position: relative;
I left out some CSS code to make it simpler, but here is a demo http://fiddle.jshell.net/3Bsyd/2/
Thank you!
Upvotes: 16
Views: 55806
Reputation: 257
<div id="facebook" style="cursor:pointer;" onClick="window.open('http://www.google.com','_newtab');">Test</div>
Upvotes: 2