SRC IMAGE HOVER EFFECT MOUSE OVER AND OUT

By AYESHA KHAN -


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FB GADGETS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style></style>
</head>
<body>
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='http://www.firstsearchconsultancy.co.uk/clients/north-east/car-body-repairs-loftus/car-body-repairs-loftus-pn-main.jpg'" onmouseout="this.src='http://www.allgigs.co.uk/images/object/artist/66582/Roary_The_Racing_Car-1-200-200-100-crop.gif'">
</img>
</a>
</body>
</html>


===================================================================
IN BLOG I USE THIS CODE IN THIS WAY
===================================================================

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'>
<img src="data:post.firstImageUrl" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgby1YAbrO70r6Lqb52A9TXoPgmKAgiyHSC3I5wZ8Ya5kf4BX54WDvY_YhS27WK96geN4vyVneLsBagZvGZUJJoTI9tqygJZIHsTEX5AwlEZV0sTt7hvhSfh6usOLVWi119Ov-AT3iBmsD6/s1600/FBGadgets.png'">
</img>
</a>
</b:if></b:if></b:if>










============================================================
READ MORE
http://stackoverflow.com/questions/9400883/change-image-on-hover





Comments

Post a Comment

Popular posts from this blog

AJAX RELATED POST WIDGET

By AYESHA KHAN -
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML expr:dir='data:blog.languageDirection'>  <head>     <b:include data='blog' name='all-head-content'/>     <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if> <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>     <meta expr:content='data:blog.metaDescription' name='description'/> <link href='//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css' rel='stylesheet'/> <!--[if lt IE 9]> <script src="http://mkr.googlecode.com/svn/JS/css3-mediaqueries.js"></script> <![endif]-->     <b:skin><![...
Read more

SHORT POST SUMMERY JAVA CODE WITH IMAGE IN BLOG

By AYESHA KHAN -
<script type='text/javascript'> //<![CDATA[ function bp_thumbnail_resize(image_url,post_title) { var image_size=120; image_tag='<img src="'+image_url.replace('/s72-c/','/w'+image_size+'-h90-c/')+'" alt="'+post_title+'" title="'+post_title+'"/>'; if(image_url!="") return image_tag; else return ""; } //]]> </script> ------------------------------------------------------------------------------------------------------------------------------- <b:includable id='post' var='post'>   <article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>     <b:if cond='data:post.firstImageUrl'>       <meta expr:content='data:post.firstImageUrl' itemprop='image'/>     </b:if> <b:if cond=...
Read more