How can i create multiple tooltips for multiples class?
https://jsfiddle.net/6v1fbrk9/
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg"/>
<span id="tooltip-span">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
You will need to select each of your "tooltip-able" links, loop over them and bind mouseover event to every tooltip content. Also don't use duplicated ids, use classes. I fixed HTML and CSS a little (add z-index).
Something like this will work:
var tooltips = [].slice.call(document.querySelectorAll('.tooltip'))
tooltips.forEach(function(tooltip) {
var tooltipSpan = tooltip.querySelector('.tooltip-content');
tooltip.onmousemove = function(e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
}
})
.tooltip {
text-decoration: none;
position: relative;
}
a.tooltip .tooltip-content {
display: none;
z-index: 1000;
}
a.tooltip:hover .tooltip-content {
display: block;
position: fixed;
overflow: hidden;
}
img.hidden {
display: block;
}
<a class="tooltip" href="http://www.google.com/">
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
<span class="tooltip-content">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
</a>
<a class="tooltip" href="http://www.google.com/">
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
<span class="tooltip-content">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
</a>
Question is unclear.
Are you trying to put multiple tooltips for a single image?
If that's the case,You could use image-map or put divs with background: transparent at the locations you want the tooltips, and then using the tooltips on it.
Some help from W3 with map
Hope this works for you.
Related
I have an unordered list in which every list item has a span and inside of it a picture.
I'm trying to set as background-image of every span, the image that their inner img block contains and then put the opacity of that image block to 0.
Here's the code I wrote. The problem is that this seems not work correctly, even if I coomment the line where I set the background image, I still can see the pictures, while I wouldn't be supposed of, since the opacity of the img block is set to 0. That makes me think that the code isn't setting the background image correctly.
Can you help me understand what I am doing wrong?
thank you!
var myUl = $('.my-ul');
[...myUl.children].forEach(childLi => {
const span_list = childLi.querySelector('span');
const img_list = childLi.querySelector('img');
var path_picture = img_list.src;
$(span_list).css("background-image", "url(${path_picture})");
$(span_list).css("background-size", "contain");
img_list.style.opacity = 0;
});
.my-ul li span {
display: block;
width: 200px;
height: 200px;
}
.my-ul li img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="my-ul">
<li>
<span>
<img src="https://www.trudellanimalhealth.com/sites/default/files/documents/tmdi-cat-athma-concern_2x.png" />
</span>
</li>
<li>
<span>
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" />
</span>
</li>
<li>
<span>
<img src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" />
</span>
</li>
</ul>
There are two issues:
$(".myul") returns a jquery collection, which as a .children() function (not a property) but this is not an array, so can't be iterated using [...].forEach
"url(${path_picture})" looks like it uses string interpolation, so needs to use backtick ` not quote "
Giving:
//var myUl = $('.my-ul');
var myUl = document.querySelector(".my-ul");
[...myUl.children].forEach(childLi => {
const span_list = childLi.querySelector('span');
const img_list = childLi.querySelector('img');
var path_picture = img_list.src;
$(span_list).css("background-image", `url(${path_picture})`);
$(span_list).css("background-size", "contain");
img_list.style.opacity = 0;
});
.my-ul li span {
display: block;
width: 200px;
height: 200px;
}
.my-ul li img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="my-ul">
<li>
<span>
<img src="https://www.trudellanimalhealth.com/sites/default/files/documents/tmdi-cat-athma-concern_2x.png" />
</span>
</li>
<li>
<span>
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" />
</span>
</li>
<li>
<span>
<img src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" />
</span>
</li>
</ul>
The alternative is to use jquery
var myUl = $('.my-ul');
myUl.children().each((i, e) => {
var path_picture = $("img", e).attr("src");
$("span", e)
.css("background-image", `url(${path_picture})`)
.css("background-size", "contain");
$("img", e).hide();
});
.my-ul li span {
display: block;
width: 200px;
height: 200px;
}
.my-ul li img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="my-ul">
<li>
<span>
<img src="https://www.trudellanimalhealth.com/sites/default/files/documents/tmdi-cat-athma-concern_2x.png" />
</span>
</li>
<li>
<span>
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" />
</span>
</li>
<li>
<span>
<img src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" />
</span>
</li>
</ul>
Not sure how you handle changing styles in vanilla js or jquery, but it could be this img_list.style.opacity = 0; is wrong. Maybe img_list is a group of elements/nodes so it won't work?
I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:
As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I'm building an electron app and I created a div menu with spans in it that contain their own Iframe HTML. I want to be able to click on a specific span and for it to display its Iframe. Right now when I have more than one Iframe in the HTML file, it displays them over each other. Here is my HTML:
<div class="menu">
<img src="./images/group-30.png" class="logo"></img>
<span class="menu_spans" id="tasks">
<img src="images/group-47.png" class="tasks-img"></img>
<!--<iframe src="tasks.html"></iframe>-->
</span>
<span class="menu_spans" id="add-tasks">
<img src="images/group-55.png" class="add-tasks-img">
<iframe src="addTasks.html" scrolling="no" allowtransparency="yes" style="width:1020px; height: 574px; position: relative; top:-350%; left: 57px; border:none;"></iframe>
</span>
<span class="menu_spans" id="billing">
<img src="images/group-60.png" class="billing-img">
<!--<iframe src="billing.html" scrolling="no" allowtransparency="yes" style="width: 1020px; height: 574px; position: relative; top:-269px; left: 57px; border: none;"></iframe>-->
</span>
<span class="menu_spans" id="proxies">
<img src="images/group-61.png" class="proxies-img">
<!--<iframe src=""></iframe>-->
</span>
etc...
I've tried something like this but it doesn't work:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', () => {
console.log(this.id);
});
}
I've coded this before in jQuery a while ago but im not sure how to do it in just regular js.
Any help is appreciated thank you!
You could use something like this:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', smth, false);
}
function smth() {
console.log(this.id);
}
Here is JavaScript code which properly reads id of clicked element, so you can use the id of element to set iframe thing in future.
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', (event) => {
if (event.currentTarget.nodeName === "SPAN") {
console.log(event.currentTarget.id);
return true;
}
});
}
Link to fiddle: fiddle
EDITED
To make it more specific.
This is my code.
<div class="ccms_form_element cfdiv_file" id="attachment_1_container_div" style="margin: 0; padding: 0;">
<label for="attachment_1">Συννημένα:</label>
<input id="attachment_1" class="" title="" type="file" name="attachment_1">
<img src="http://www.saveursdebacchus.com/medias/images/plus-sign.png" id="plus" onclick="addfield()" style="width: 35px; position: relative; top: 4em; cursor: pointer;">
</div>
<div class="ccms_form_element cfdiv_file" style="display: none; position: relative; left: 11.5em; margin: 0px; padding: 0px;height: 38px;" id="attachment_2_container_div">
<input id="attachment_2" class="" title="" type="file" name="attachment_2" style="position: relative; top: -1em;">
<img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/3d-glossy-orange-orbs-icons-alphanumeric/104914-3d-glossy-orange-orb-icon-alphanumeric-minus-sign-simple.png" id="minus" onclick="removefield()" style="width: 35px;position: relative;left: 3em;top: 0.095em; cursor: pointer;">
</div>
<div class="ccms_form_element cfdiv_file" id="attachment_3_container_div" style="position: relative; left: 11.5em; margin: 0; padding: 0; display: none;">
<input type="hidden" name="attachment_3" value="" alt="ghost">
<input id="attachment_3" class="" title="" type="file" name="attachment_3">
</div>
What I want is, the img#plus when is clicked to display the next field (e.g div#attachment_2_container_div) and the image to go down closed to new displayed field.
This for 2 times (first for div#attachment_2_container_div and second for div#attachment_3_container_div). And also the inverse method with img#minus.
I think it needs more code than 5-10 lines.. Thats why I asked little by little.
I'll follow a more simply way (I will give images in every row and on display of a div I'll take the result I want). Sorry for any trouble.
Moves the button down incrementally on the number of clicks the button recieves, so the 'jumps' get 1em larger each time, you can adjust the way the 'counter' variable increments in addfile to change the 'jumps'
Not sure if this is what you're looking for, relatively unclear question
[revision to include 1,3,5em jumps]
var imgObj = null;
var counter = 0;
function init(){
imgObj = document.getElementById('plus');
imgObj.style.position= 'relative';
imgObj.style.top = '1em';
}
function addfile(){
counter++;
if(counter==1){
imgObj.style.top = parseInt(imgObj.style.top) + 1 + 'em';
}
else if(counter==2){
imgObj.style.top = parseInt(imgObj.style.top) + 3 + 'em';
}
else if(counter==3){
imgObj.style.top = parseInt(imgObj.style.top) + 5 + 'em';
}
else
imgObj.style.top = parseInt(imgObj.style.top) + 0 + 'em';
}
window.onload =init;
I m not sure what u want , but according to what i understood by ur question i have done a fiddle, here is the link, hope its what u needed :) fiddle click here
var my=null; //dont consider this line, m new here, pls ignore
I have done modification in your HTML, and functions are a mixture of both javascript and jquery.