i have an issue for my site i'm working on kirandarren.com the icons i have on the site I wish to have some kind of image swap or roll over on hover to show that its a button. At first i tried rollover image swap with dreamweaver and it worked great but as soon as i implemented fancybox it seem to clash with the rollover image swap. any ideas?
any assistance in the right direction would be appreciated! I am quite the novice just trying to get our wedding site completed any help in the right direction would be greatly appreciated! Thanks ahead of time! I hope i attached the right code below.
<body onload="MM_preloadImages('images/our_story_rollover.png','images/directions_rollover.png','images/bridal_party_rollover.png','images/chicago_spots_rollover.png','images/registry_rollover.png')">
Join us on October 13th, 2013 at 5 o'clock in the evening
Ceremony will begin at 5:30 | Cocktail hour & Reception to follow<p align="center">
<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/58303552"><img src="images/our_story_off.png" name="our_story" width="206" height="210" hspace="14" vspace="0" border="0" id="our_story" /></a>
Don't use iframe as it will always conflict with various browsers and might create more issues than solutions.
As you mentioned that you wanted to show that the images are buttons, so just to let the user know this is a link or button, I suggest use onmouseover and onmouseout in the IMG tag. and use a custom jQuery or javascript to give it and animation or transition if you want. eg
<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>
</body>
</html>
HINT: to create a better looking button, USE box-shadow (css property in the script you will create).