This is the code
<head>
<style>
#divtoshow {position:absolute;display:none;}
#onme {width:100%;height:100%;cursor:pointer}
</style>
<script type="text/javascript">
var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
var offX = 30; /*X offset from mouse position*/
var offY = 50; /*Y offset from mouse position*/
function mouseX(evt) {
if (!evt)
evt = window.event;
if (evt.pageX)
return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else return 0;
}
function mouseY(evt) {
if (!evt)
evt = window.event;
if (evt.pageY)
return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
else
return 0;
}
function follow(evt) {
var obj = document.getElementById(divName).style;
obj.left = (parseInt(mouseX(evt))-offX) + 'px';
obj.top = (parseInt(mouseY(evt))-offY) + 'px';
}
document.onmousemove = follow;
</script>
</head>
<body>
<div id="divtoshow">
<img src="http://www.rw-designer.com/cursor-preview/35050.png">
</div>
<br><br>
<div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>
Mouse over this
</div>
</body>
This code is for an object(image in my case) to follow mouse pointer. I have put the javascript in the tags but I want the html to be applied on the whole website instead of one page or post. How I can do this?
-
You could simply make an external script file as explained here.TheOnlyError– TheOnlyError2015年06月25日 11:01:12 +00:00Commented Jun 25, 2015 at 11:01
-
...But there is a WordPress Exchange...glend– glend2015年06月25日 11:29:43 +00:00Commented Jun 25, 2015 at 11:29
-
@doveyg , I didnt know :)WaqasRaza– WaqasRaza2015年06月25日 12:01:55 +00:00Commented Jun 25, 2015 at 12:01
-
@TheOnlyError the problem is not with JS , the problem is that where I should put the html so it can target the whole website.Actually I want the above effect on all pages instead of a div block.WaqasRaza– WaqasRaza2015年06月25日 12:05:03 +00:00Commented Jun 25, 2015 at 12:05
-
I don't work with Wordpress so I'm not going to give you false adviace, but as doveyg said. Try asking it on there, they will be able to assist you better.TheOnlyError– TheOnlyError2015年06月25日 12:18:42 +00:00Commented Jun 25, 2015 at 12:18
1 Answer 1
Try this:-
//For adding javascript and css
add_action('wp_enqueue_scripts','wdm_test_script');
function wdm_test_script(){ ?>
<style>
#divtoshow {position:absolute;display:none;}
#onme {width:100%;height:100%;cursor:pointer}
</style>
<script type="text/javascript">
var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
var offX = 30; /*X offset from mouse position*/
var offY = 50; /* Y offset from mouse position*/
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {
var obj = document.getElementById(divName).style;
obj.left = (parseInt(mouseX(evt))-offX) + 'px';
obj.top = (parseInt(mouseY(evt))-offY) + 'px';
}
document.onmousemove = follow;
</script>
<?php }
//For adding content to all pages
add_filter('the_content','wdm_demo_content',1,1);
function wdm_demo_content($content){
ob_start();
?>
<div id="divtoshow"><img src="http://www.rw-designer.com/cursor-preview/35050.png"></div>
<br><br>
<div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>Mouse over this</div>
<?php
$contents = ob_get_contents();
ob_end_clean();
return $contents.$content;
}
answered Jun 25, 2015 at 12:27
Domain
11.8k3 gold badges26 silver badges45 bronze badges
Sign up to request clarification or add additional context in comments.
4 Comments
WaqasRaza
can u please tell where I am supposed to place the above code ? :)
Domain
In the functions.php file.
WaqasRaza
This code is working but I dont know why I can not position the image that is following the pointer
WaqasRaza
I have used the above code here olocally.com but I have a problem , the image the is following the pointer hides behind things i,e like mouse pointer it does not stays on the words rather words come on top of it . like here prntscr.com/7laeru how I can overcome this??
default