I have a background image in my html page. I want it to popup when I hover over a part of it.
I did this by putting an image over the backgroung with opacity: 0 and my function did was putting opacity: 1 when hovering over the image.
But when the screen size changes, the image position changes.
I think you shouldn't be using it in background image. Can you rather use a regular img tag, and then you can define a usemap attribute to it, and map the areas using a map.
This approach is explained here: https://www.w3schools.com/tags/tag_map.asp
You can put a javascript:functionName() for href attribute of any area in a map.
Related
I am using Vue 2, on the html I have an image which has white background, with a colorful object on the middle. Is it possible to detect and change the mouse cursor, based on the background color of where the mouse cursor is? Like, when on the white parts, against the actual object image (anything not-white).
Let's say it's an image like this. I want the cursor to change to pointer anywhere on the image where the background is not white.
https://www.vecteezy.com/vector-art/2751371-apple-with-a-white-background
Note: JQuery is not an option on this project
Thanks.
You can't check the color that the mouse touches, but you can just use a css rule to set the cursor for a specific element, as used the example you linked.
img {
cursor: zoom-in;
}
See more info on mdn
I want to change the cursor with my own image when it's hover on my specific divison
i have try below as per describe in Possible to replace cursor with my own custom image? this link
demo:hover
{
cursor:url("img/point.png");
}
but this is not working properly it's change cursor but not with my image
I'm having some trouble displaying a background image on an img tag after setting the src attribute to a transparent pixel.
HTML:
<img class="test-class" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png">
CSS:
.test-class {
border: 1px black solid;
width: 256px;
height: 256px;
}
JavaScript:
var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAE0lEQVR4XgXAAQ0AAABAMP1L38IF/gL+/AQ1bQAAAABJRU5ErkJggg==";
var spriteUrl = "url(http://upload.wikimedia.org/wikipedia/commons/9/9a/Google_Chrome_screenshot.png)"
// Why doesn't background image show?
$(".test-class").attr("src", transparentPng);
// It does show if src is set to a broken URL, though.
//$(".test-class").attr("src", "invalidurl");
$(".test-class").css("background-image", spriteUrl);
Here's a live test case: http://jsfiddle.net/rmjaD/1/
What I really want to do is show a sprite, but since the sprite image will be pretty large and it will only be displayed on an event, I'm using the src attribute of the image tag to show an initial image. When the event happens, I want to replace that image with the sprite. To achieve this, my idea is to replace the source image with a transparent pixel and set the background image. But for some reason the background image is not showing up.
Can you tell me what I need to change in the test case to make the larger image (representing the sprite) visible?
There seems to be something wrong with the image you are using.
Use this image. It works.
var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";
The base64 image is somehow corrupted, see http://jsfiddle.net/David_Knowles/3SvJU/
var transparentPng = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!
This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)
If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.
I got a div with some text and a link tag in it, when i click on the link i would like to have an overlay over the div so the opacity is set to .3 or something and have a little form put over it. Does anyone know how to approach this in jquery?
You can use my elementOverlay plugin:
var overlay = $('#yourDiv').elementOverlay();
// some code
overlay.elementOverlay('hide');
Plugin code: https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/Plugins/jquery.griffin.elementoverlay.js
Just make a div of a fixed size, width and position (the same and place as the original) and set It's background color to slightly transparent.