Fading comparison image
-
I’m looking to post pictures to my blog that fade between old and modern photos of my town as you mouse over them – hard to explain but I’ve uploaded one here which should clarify what I’m trying to achieve.
I’ve managed to get this to work in HTML – here’s the code:
<!DOCTYPE html>
<html>
<head>
<title>Old Preston Comes To Life</title>
<style>
.trackMe img.beforeafterphotos {
top:0 !important;
left:0 !important;
position:absolute;
margin:0 0 15px 0 !important;
}
</style>
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>
<script type=”text/javascript” language=”JavaScript”>
$(document).ready(function() {
$(‘.trackMe’).each(function(){
$(this).children(“img:last”).mousemove(function(e) {
var offset = $(this).offset();
var xpos = (e.pageX – offset.left);
var ypos = (e.pageY – offset.top);
//now to get the first child image width..
var thisImage = $(this);
var thisWidth = thisImage.width();
var pct = Math.round((xpos/thisWidth)*100)/100;
var ipct = Math.abs(Math.round(((xpos-thisWidth)/thisWidth)*100)/100);
thisImage.css({ ‘opacity’ : ipct });
});
});
});
</script>
</head>
<body>
<div style=”position:relative; width:600px; height:460px;” class=”trackMe”>
<img src=”Assets/Img/Ribbletonsmnow.jpg” class=”beforeafterphotos” />
<img src=”Assets/Img/Ribbletonsmthen.jpg” class=”beforeafterphotos” />
</div>
</body>
</html>Can anyone help me to post this image correctly to my free wordpress.com blog?
The blog I need help with is: (visible only to logged in users)
-
The blog I need help with is oldprestoncomesalive.wordpress.com.
The blog http://oldprestoncomesalive.wordpress.com/ is totally empty
-
-
-
-
-
-
Thanks all – I tried the gif method but wasn’t satisfied with the result. Looks like wordpress may not be the ideal platform for this project!
-
If you have the Custom Design upgrade you can make rollover images on WordPress.com:
https://wpbtips.wordpress.com/2013/05/20/rollover-images/If you find a host and domain name, then you can use WordPress.ORG to run your site. There are several plugins which would probably work for you.
-
- The topic ‘Fading comparison image’ is closed to new replies.
WordPress.com Forums 