I started to develop a sniper game but i am finding a trouble moving the sniper image inside the div my main goal is when the mouse is over the div i want to change it's image to the sniper image that's what i did :
<center>
<div id="field" class="cursor1">
</div>
</center>
<script type="text/javascript">
$(document).ready(function() {
$("#field").mouseover(function() {
$(this).addClass("cursor");
});
});
</script>
<style type="text/css">
#field
{
width:300px;
height:300px;
border:1px solid;
}
.cursor
{
cursor:url("sniper.jpg") ;
}
</style>
but that didn't work. How can I move the image inside the div?
I would not suggest setting your mouse image with css, because it's easier to adjust image size and center it with replacing mouse cursor with a real image.
$('#box').mouseenter(function(){
$('img').css('display','block');
});
$('#box').mouseleave(function(){
$('img').css('display','none');
});
$("#box").mousemove(function(event) {
$('img').css('left',event.pageX-20);
$('img').css('top',event.pageY-20);
});
I made a simple example of this http://jsfiddle.net/N9pu4/
Also consider using canvas element for rendering graphics.
The basic (CSS 2.1) syntax for this property is:
cursor: [<url>,]* keyword
This means that zero or more URLs may be specified (comma-separated), which must be followed by one of the keywords defined in the CSS specification, such as auto or pointer.
(see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&redirectslug=CSS%2Fcursor%2Furl)
So you should provide a fallback value:
.cursor
{
cursor:url("sniper.jpg"), auto;
}
#field:hover
{
cursor:url("sniper.jpg") ;
}
Related
Greetings and thanks in advance for the help. My first hack at javascript. Just trying to add a 2em black border around the slider, and remove the mouse pointer when hovering over the slider (I don't wish to offer links from the pictures).
Link is: www.bakashana.org/test-slider
Here is the entire code:
<html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
</head>
<body>
<center><img src="https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg" name="slide" border="2em" width=400 height=300></center>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/All-the-ladies-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/highcompress-banner20-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/banner10-1-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-banner-testing-compressor-400x300_c.jpg")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
Okay this as you mentioned in comment so there it is. Removing cursor with simple CSS:By adding cursor:none property to slider and using pseudo class :hover to checking if the cursor is hovering the given div and then apply border property to it on other hand disabling the mouse clicks on your slider like this but we need to use jquery for this i have added the jquery in snippet working example below.
var event = $("#yourSlider").click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
// disable right click
$("#yourSlider").bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
#yourSlider{
background:orange;
width:400px;
height:300px;
cursor:none;
}
#yourSlider:hover{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yourSlider"></div>
Thank you all for your help! I tried the abovementioned solutions but wasn't able to get them to work properly (the mouse hand continued to be seen on scroll-over). I found the easiest possible solution, I thought I would post it for others to see.
<style>
#yourSlider{
width:400px !important;
height:300px !important;
border:.2em solid black;
pointer-events:none !important;
}
</style>
The 'pointer-events:none !important' taking care of the scroll-over issue (it didn't work without the !important added), and the border taking care of the border issue.
Thanks again to all who contributed!
For reasons of learning, I want to implement a tooltip, which follows my cursor within a certain element in my page. For this exercise, I want to use plain Javascript to achieve this task. The canvas should show the current cursor position in a rectangle with a border. Could someone spot the error?
My page looks like this:
In the head I have the CSS declaration
<style>
#tt {
border: 10px green;
position: absolute;
left: -100px; /* initially invisible */
top: 0;
}
</style>
In the HTML body, I have defined my tooltip like this:
<canvas id="tt" width="80" height="15"></canvas>
<br>
<div id="area">
<!-- This is the area where I display my tooltip -->
</div>
Now to the JavaScript part:
I'm catching the "mousemove" event,
document.getElementById("area").addEventListener("mousemove",mouseMove,false);
have the following global definitions:
hcan=document.getElementById("tt");
hctx=hcan.getContext('2d');
and write the tooltip with this code:
var hx=e.clientX;
var hy=e.clientY;
hcan.style.left=hx+"px";
hcan.style.top=hy+"px";
hctx.clearRect(0,0,80,15);
hctx.fillStyle="red";
hctx.fillText(hx+'/'+hy,0,10);
I can see the tooltip text following my mouse cursor, but I can't see the border of the tooltip, which I have defined in my declaration.
Could it be that the border is implicitly erased, when I call clearRect? But this should only clear the interior part of the canvas, not the border, which is just decoration - I think.
Try adding a border-style, otherwise you're defining 10px green none
border: 10px solid green;
should do it.
I'm trying to build a page so me and my team can position some images freely on the screen. The problem is that I can't figure out a way to make those images draggable. I tried to figure out by myself and came upon this nice topic about it: HTML5 drag and drop to move a div anywhere on the screen?
I've tried to apply this idea to my page and replace "getElementsByID" with "getElementsByClassName" but no dice.
In addition, it would be twice as nice if the draggable image were to respect the responsiveness of the page, if anyone knows how to do that.
Here is the codepen with my attempt: http://codepen.io/GuiHarrison/pen/EsHyr
Thanks!
Well, I just made this up, it's kinda buggy, but you can play around with it.
<html>
<head>
<style>
#mydiv{
width: 100px;
height: 100px;
border: solid black 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
<script>
var mousedown = false;
function ismousedown(tf){
if(tf == 1){
mousedown = true;
}
else{
mousedown = false;
}
}
function mousemove(event){
if(mousedown){
document.getElementById("mydiv").style.left=event.pageX;
document.getElementById("mydiv").style.top=event.pageY;
}
}
</script>
</body>
You can use kineticjs for this. Check this!
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
This is more relevant,
http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs
I have been learning css & jquery.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
border-style:solid;
border-color:red;
height: 80px;
width: 180px;
}
</style>
</head>
<body>
<div id="box">Demo Box</div>
</body>
</html>
what i am trying to achieve is the border color should appear from left top and flow to create a box border around the division. it seems impossible just want to know expert guidance if this could be done.
*Edit MobyD thanks " like a tron bike "
Assuming you want an animation around the box, it could be arranged by animating a sequence of lines, each animation triggering the next, as it finishes.
addLine1();
line1.animate({ width: width-of-box }, duration, function() {
addLine2();
line2.animate({ height: height-of-box }, duration, ... );
});
Each line would have to be positioned at its appropriate corner.
Demo
A neater recursive solution could probably be built, but it's something along these lines that you'd have to go with. The border property itself cannot be animated in this manner.
Assuming you want a gradient border or what do you mean by flow?
Yes it can be done.
Example 2px gradient border:
Simply create a div positioned relative which has a gradient background in your colors
Then create a child div positioned absolutely in there with a widht and height slightly smaller
and you're ready.
see http://jsfiddle.net/njL3H/
I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform