Applying tooltip on mouse hover - javascript

I'm putting an image on html5 canvas.
myString = '<img id="img1" class="link1" src = 'img/icon1.png'></img>';
$('#main1' ).append(myString);
$('#main1' + '-link1').fadeIn('slow');
$(".link1").click(function () {
window.location.href = url1;
});
$(".link1").hover(function () {
$('#myDiv').show();
}, function () {
$('#myDiv').hide();
});
The div is :
<div id="myDiv" style="display:none;border: 1px solid black;width: 10px;height:5px;padding: 1px;">
<p>Hello</p>
</div>
Now, on mouse hover the div appears at end of the page. I need it to appear just below the image. How can I achieve that?

That depends on the positioning of your 'myDiv' div.
You could just use the <img title="my tooltip text" /> if it's just text in your tooltip.

You can use pageX , pageY from event object to position the div on below the image .
Please try this link to get the solution http://jsfiddle.net/ZpGS3/14/ .

To apply Tooltip on mouseover you should use
$('#img1').mouseover(function(){
$(this).attr('title','MY Image Title');
});

You may try a jQuery plugin called TipTip:
http://code.drewwilson.com/entry/tiptip-jquery-plugin
You'll see it's very easy to use and the design is quite great :).
You can go to the link and have a try to see if you like it or not.
Considering your example, in order to display the TipTip's tooltip, you'll simply have to do the following:
Include TipTip's CSS and JS file references
Put some JS: $("#img1").tipTip();
Put your tooltip's content inside the title option of your image:
For example: <img id="img1" title="<p>Hello</p>"/>

Related

How to implement drag and drop so dragging child element will drag whole parent element

I'm working on a media import plugin for wordpress. I'm trying to implement a drag and drop feature to reorder media elements(audio and/or images) that the user has imported. I have a <div> tag(we'll call these media divs) that holds up to three other <span>, <img>, or <audio> tags. So I have all the media assets that have been imported displayed in a line and would like to be able to drag and drop to reorder the media divs. I have no problem implementing the basic drag and drop using html5. My problem is that right now when I click on the media child elements(<audio> or <img>) inside the media divs, the child element is the target of the drag event. Is there any way I can reset the target of the drag event to be the parent element so I drag the whole media div and not just the media element? I've looked into e.stopPropogation() and read up on bubbling, and capturing but every way I've tried to utilize those, it doesn't solve my problem. Is there something I'm missing? I would prefer to avoid jQuery if possible and definitely can't use any libraries or frameworks. TL;DR: How can I make the parent element the target of a drag event when a child element is clicked?
<div class="npr-import-media npr-import-audio npr-import-images" id="media-container">
<div class="npr-import-media-container" draggable="true">
<audio src="<?php echo $audio->format->mp4->{'$text'}; ?>" controls></audio>
<span class="npr-media-delete">X</span>
</div>
<div class="npr-import-image-container npr-import-media-container" draggable="true">
<img class="npr-import-image" src="<?php echo $image->src; ?>" >
<span class="npr-import-image-caption"><?php echo $image->caption->{'$text'} ?></span>
<span class="npr-media-delete">X</span>
</div>
<div class="npr-import-add-media npr-import-media-container">
Add Media+
</div>
</div>
This is the HTML portion of my code. There is originally some more php functionality to loop through the original source material to display all of the media elements being imported in from the original article, but I don't think it's necessary to include that.
I just came across this issue as well. I resolved it without javascript by simply adding draggable="false" to each child element.
<div class="npr-import-image-container npr-import-media-container" draggable="true" ondragstart="drag(event)" style="border:1px solid blue;padding:10px;">
<img draggable="false" class="npr-import-image" src="img.jpg" >
<span draggable="false" class="npr-import-image-caption">Caption</span>
<span draggable="false" class="npr-media-delete">X</span>
</div>
I was just in the same problem and couldn't work around img tag, so switched to div.
You can use
<div style="background-image: url('img.jpg')"></div>
instead of
<img class="npr-import-image" src="img.jpg" >
You can set the handler for ondragstart event to return false, like below:
<div class="npr-import-media npr-import-audio npr-import-images" id="media-container">
<div class="npr-import-image-container npr-import-media-container" draggable="true" ondragstart="drag(event)" style="border:1px solid blue;padding:10px;">
<img class="npr-import-image" src="img.jpg" >
<span class="npr-import-image-caption">Caption</span>
<span class="npr-media-delete">X</span>
</div>
<div class="npr-import-add-media npr-import-media-container">
Add Media+
</div>
</div>
<script>
function drag(e) {
console.log(e);
}
var images = document.getElementsByTagName('img');
for(i = 0 ; i < images.length; i++)
images[i].ondragstart = function() { return false; }
</script>
On console output you can see:
>> DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 66, screenY: 161, clientX: 66…}
UPDATE
By setting drag event handlers on the parent elements either by html attributes as above or attaching event listeners by code as below:
document.getElementById('draggable').addEventListener('dragstart', function(e) {
console.log(e);
});
I faced a similar situation. I had a parent with two children (gripper and content), and needed the whole parent to be dragged when gripper was dragged, but no dragging when content was dragged
Make the parent and content draggable, BUT in the content's ondragstart, cancel the drag, that way the drag will start only when the mouse is not in the content (but in the gripper)
const catchAndPreventDragStartEventGettingToParent = (event) => {
//prevent drag behaviour in content item,
console.log("no dragging");
event.preventDefault();
};
const dragStart = (event) => {
console.log("dragging");
//event.dataTransfer.effectAllowed = "move";
//event.dataTransfer.setData("text/plain", JSON.stringify(data));
};
#parent{
padding: 1rem;
background-color:teal;
}
.gripper{
margin: 1rem;
padding:1rem;
background-color: linen;
}
.content{
margin: 1rem;
padding:1rem;
background-color: pink;
}
<div
id="parent"
draggable = true
ondragstart= "dragStart(event)">
<span class ="gripper">Gripper:</span>
<span
class = "content"
draggable= true
ondragstart="catchAndPreventDragStartEventGettingToParent(event)">
CONTENT
</span>
</div>
Maybe it's too late but I find out an easy way to get the closest parent with a specific css class.
Based on your example try to use
const handleDragEnter = (e) => {
let desiredTarget = e.target.closest('.npr-import-image-container');
console.log(desiredTarget);
// do stuff...
}
To expand on Orion's answer, when dragging an element across the page, the immediate user selection will change once the mouse encounters a draggable element. Once this change happens, it will fire a dragleave event for the previous current target element, and update it to the current element you are hovering over - essentially the new drop target. Since images (and links) are draggable elements by default, this can cause issues when they are children of your drag-and-drop solution.
This is why draggable="false" on images will work to disable the native functionality; however, I have found that applying the pointer-events: none CSS property to the images will work as well. Although, if you use the CSS solution, you might need JS to toggle that style if you want a hover effect on the images themselves. Wanted to provide this information just in case it would not be possible to update the image's attributes.

4 Images in HTML, need help to show the small picture when hovered in the large picture

So I have 3 Images in line in HTML, and a large one below, and the 1 large one below it is the same image as one of the top 3. No thumbnails or anything being used. All I want done is when I Hover over the first small image it should show and change the bottom image, and if I hover away it changes back to its original, and same with the 2 other photos when I hover the large pic at the bottom should should it.
Organized like(in html)
Pic1 pic2 pic3
Pic4(larger)
<img src="guitars.jpg" width="80" height="60" alt="Guitars">
<img src="control.jpg" width="80" height="60" alt="Control Room" onmouseover="">
<img src="singing.jpg" width="80" height="60" alt="Singing Room" onmouseover="">
<br>
<img src="guitars.jpg" width="400" height="300">
I'm going to give you an example with only two elements (with only a single one having the event functionality), in which then you can expand to 3 images. The basic idea is to change the src of the large image to the this.src of the image when hovered (in JS it's the onmouseover event). Then on onmouseout set the src back to it's normal image. If the original image is just the first small image simply set it to that <img> element. Otherwise keep track of it.
In the following example #main is the large image, #apple is the first small image and #banana the second small image.
// This gets the original src of the main (large image)
// That way when it's changed we can refer to this variable to revert it
var original = document.getElementById("main").src;
// On mouseover the "banana" image, that the src of the main image to src of the banana
document.getElementById("banana").onmouseover = function(){
document.getElementById("main").src = this.src;
}
// On mouseout of "banana" we change the main image back to it's original image
document.getElementById("banana").onmouseout = function(){
document.getElementById("main").src = original;
}
Fiddle Example
A simple solution would be to implement onclick or onmouseover event on the small images, and update the src value of the big image.
See this for reference: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
If you want to easily add more images in the future, then you might want a slider with custom pager.
If you are comfortable with jQuery, I recommend this plugin because it is fairly easy to use:
http://jquery.malsup.com/cycle2/
(Check out the carousel pager demo)
Good luck!
Try using css :hover , :nth-of-type() , :not() , general siblings selector
img:not(.lg) {
width:50px;
height: 50px;
}
img.lg {
width:160px;
height:160px;
background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(1) {
background-image:url(http://placehold.it/50/ff0000/ffffff);
}
img:nth-of-type(2) {
background-image:url(http://placehold.it/50/00ff00/ffffff);
}
img:nth-of-type(3) {
background-image:url(http://placehold.it/50/0000ff/ffffff);
}
img:nth-of-type(1):hover ~ .lg {
background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(2):hover ~ .lg {
background-image:url(http://placehold.it/160/00ff00/ffffff);
}
img:nth-of-type(3):hover ~ .lg {
background-image:url(http://placehold.it/160/0000ff/ffffff);
}
<img /> <img /> <img /> <br />
<img class="lg" />

How to make a div hide properly on hover while trying to make a gif also start on hover

I am pretty new to coding and have pieced some things together. I am trying to make an on hover gif start. The original image is static and when you hover the gif starts to play. I got that working fine but I want an overlay over the static image, like a "hover me" button essentially. When I hover over the overlay it wont start the gif because I am not hovering over the static image. When I do a hover display:none for the overlay it just flickers.
Here is a link to what I have so far:
<div class="container">
<div class="overlay">TEST </div>
<img src="http://fdfranklin.com/gif1.jpg" alt="" id="static">
</div>
(New to stackoverflow so not sure how to show css/JS here is a jsfiddle link)
http://jsfiddle.net/T6GEn/
If you get rid of the overlay div the gif properly plays on hover. I essentially want it just like it is now, you hover and the overlay fades out and starts playing the gif.
Any ideas? All help, greatly appreciated.
You are never hiding the overlay div, and therefore not hovering the gif. Just set the start for when you hover the overlay:
$(document).ready(function()
{
$(".overlay").hover(
function()
{
$('#static').attr("src", "http://i.imgur.com/ytWYljT.gif");
},
function()
{
$('#static').attr("src", "http://fdfranklin.com/gif1.jpg")
}
);
});
Fiddle
I would do the following. Instead of having only one img, create two, one static and one animated. Hide the animated image by default and only show when you're hovering over the overlay. E.g.
<div class="container">
<div class="overlay"><p>TEST</p> </div>
<img src="http://fdfranklin.com/gif1.jpg" alt="" id="static">
<img src="http://i.imgur.com/ytWYljT.gif" alt="" id="animated" style="display: none;">
</div>
and then
$(".overlay").hover(
function()
{
$("#static").hide();
$("#animated").show();
},
function()
{
$("#static").show();
$("#animated").hide();
}
);
Your issue is that the "hover" event is happening to the OVERLAY div, instead of the #static image now. You'll want to change your JS accordingly:
$('.overlay).hover();
See here for a complete solution: JSFiddle
You could do something like this:
$(".container").hover(
function(){
$(".overlay").fadeOut(300);
$(this).find("img").attr("src", "http://i.imgur.com/ytWYljT.gif");
},
function() {
$(this).find("img").attr("src", "http://fdfranklin.com/gif1.jpg");
$(".overlay").fadeIn(300);
}
);
JSFiddle Demo

Show bigger image on thumbnail's hover

For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.
How can I do it? I'm a beginner with HTML/css/Javascript
There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an article with some different options. Here is an example of what you are looking for.
U can work without thumbnails..
for thumbnail
<img src="http://example.com/img1.jpg" class="compress"/>
on hover of the above show this one
$(".compress").hover(function(){
$(".image").show();
});
full image
<img src="http://example.com/img1.jpg" class="image"/>
css
.compress{
width:20%;
/*aspect ratio will be maintained*/
}
.image{
display:none;
position:absolute;
}
its not complete,but i think it might help
Use JQuery:
$(function() {
$('#thumbnails img').click(function() {
$('#thumbnails').hide();
var src = $(this).attr('src').replace('.png', 'Large.png');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">
Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div> set it's display:none and then bind an event to the thumb div like this :
$(".thumb_class").hover(function(){
$(".some_class").show()
},
function(){
$(".some_class").hide()
}
Of course you can personalize every div . The second function let you to hide the div when the mouse is out of the thumb. Hope i was as clear as possible.

Using coordinates to place elements inside fancybox

I have a div containing 2 images, one is sort of a map the other is a pinpoint image, I used javascript to capture mouse clicks as x,y coordinates and the pinpoint moved easily along with clicks, here how the code looked like:
<div id="areapage" onclick="javascript:SetValues();" style="display: none;">
<img src="mysource" style="width:420;position:relative;" >
<img id="pindiv" src="images/pin.png" style="position: absolute;top: 0;left: 0;">
</div>
<script>
function SetValues()
{
document.getElementById('pindiv').style.left = window.event.screenX + 'px';
document.getElementById('pindiv').style.top = window.event.screenY + 'px';
}
</script>
it worked perfectly, until I placed it inside a fancybox, obviously something has changed, maybe x,y now refers to the original document in the background that opened the fancybox?
Try setting the #areapage div to position:relative; this will make the pindiv absolute positioning be based on that div rather than it's parent.

Categories

Resources