I have a question on how you spawn a pop-up when an image is clicked. I want a pop up to be some sort of alert. Here is my current html code I am working with:
<div>
<div class="Zipshare">
<span class ="projectIcons">
<a href="">
<img src="images/photostack.png" alt="" />
</a>
</span>
<span class="caption"><h6>Photostack</h6></span>
</div>
I have seen other posts describing how to spawn an alert view but don't know how to link it to an image. I was thinking a doing it through some sort of href link but can't figure it out.
Any help would be appreciated!
Just add the onclick attribute
<img src="images/photostack.png" onclick="alert('Hello World')" alt="" />
Or use jQuery:
$( "#img" ).click(function() {
alert( "Hello World jQuery" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" src="images/photostack.png" alt="" />
Lots of ways to do this... Here is a short one inline with your html:
<img src="images/photostack.png" alt="" onclick="alert('you clicked it')" />
function pictureRc() {
alert("You right clicked that image!")}
This is my function I used in js and the html looked like this:
<img src="pic.jpg" oncontextmenu="pictureRc()">
So when you right click it makes an alert. I know this is late but for anyone finding this thread later thought it might help!
just change the oncontextmenu to onclick for left click
Related
I have an eCommerce page of products with some small thumbnails below. When I mouse moused over a thumbnail I want to swap the different variation image into the product image. I have this working using the code below but I assume this isn't the best way to do this? Can anyone suggest a better way for me to grab the "product-image" src= tag and update it? The number of parent / child calls I've used to set the right data seems excessive.
Thanks in advance. Tim
<script>
$(document).ready(function(){
$('.nSwatchProduct').hover(function(){
var newSource = $(this).attr('data-variation-image');
$(this).parent('._itmspec_listitm').parent('.nColourSwatch').parent('.categoryswatch').parent('.caption').parent('.thumbnail').children('.thumbnail-image').children('.product-image').attr('src', newSource);
});
});
</script>
web page hierarchy
<div class="thumbnail">
<a href="https://www.website.com/productpage" class="thumbnail-image">
<img src="/assets/thumbL/imagename.jpg" itemprop="image" class="product-image" alt="" rel="itm">
</a>
<div class="caption">
<div class="nColourList categoryswatch">
<a class="_itmspec_lnk thumbnail nColourSwatch" href="https://www.website.com/productpage" ref="1_83" data-toggle="tooltip" data-placement="top" title="" data-original-title="Blue">
<div class="_itmspec_listitm" ref="1_83">
<img class="nSwatchProduct" src="/assets/thumb/variationimage.jpg" alt="Blue" data-variation-image="/assets/thumb/variationimage.jpg">
</div>
</a>
Use .closest to select nearest common parent and then .find that element you need
$(this).closest('.thumbnail').find('.thumbnail-image .product-image')
I am trying to open another image when I press the image button - I am completely new to html. I heard that you need to use the onclick to get that. Here it is what I am trying:
input type="image" src="img/gallery/5.jpg" onclick="img/floor.jpg"
Where 5.jpg is the thumbnail view and floor.jpg is the target image (present in another directory).
But the above piece of code is not working for me.
What is the correct approach?
Why this is failing ??
i used the solution to open a number of images
<img src="img/gallery/5.jpg"/>
<img src="img/gallery/6.jpg"/>
<img src="img/gallery/7.jpg"/>
<img src="img/gallery/8.jpg"/>
<img src="img/gallery/9.jpg"/>
<img src="img/gallery/10.jpg"/>
but every time it opens only the 10.jpg
Help
thanks
Why use an input and javascript in the first place ?
Just use a link
<img src="img/gallery/5.jpg">
Just use a an onclick javascript event to toggle the visiblity of the second image.
something like below.
<input type="image" onclick="image.style.display=inline;">
<img src="../5.jpg" id="image" style="display:none;"
What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>
Ok, this is working, but how to change back to the original image after mouseout?
If it is possible, I want to do this thing inline, without document.ready function.
here's a native javascript inline code to change image onmouseover & onmouseout:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>
Try something like this:
HTML:
<img src='/folder/image1.jpg' id='imageid'/>
jQuery:
$('#imageid').hover(function() {
$(this).attr('src', '/folder/image2.jpg');
}, function() {
$(this).attr('src', '/folder/image1.jpg');
});
DEMO
EDIT: (After OP HTML posted)
HTML:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png"/>
</a>
jQuery:
$('#name img').hover(function() {
$(this).attr('src', '/ico/view1.png');
}, function() {
$(this).attr('src', '/ico/view.png');
});
DEMO
Thy to put a dot or two before the /
('src','./ico/view.hover.png')"
Here is an example:
HTML code:
<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
JavaScript code:
$(document).ready(function() {
$( "#myImg" ).mouseover(function(){
$(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
});
$( "#myImg" ).mouseout(function(){
$(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
});
});
Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;)
The hover method is better, of course.
jQuery has .mouseover() and .html(). You can tie the mouseover event to a function:
Hides the current image.
Replaces the current html image with the one you want to toggle.
Shows the div that you hid.
The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.
You can do that just using CSS.
You'll need to place another tag inside the <a> and then you can change the CSS background-image attribute on a:hover.
i.e.
HTML:
<a href="#" id="name">
<span> </span>
</a>
CSS:
a#name span{
background-image:url(image/path);
}
a#name:hover span{
background-image:url(another/image/path);
}
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">
Demo
http://jsfiddle.net/W6zs5/
I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img, without "wrapping" it into the a tag (so instead of the document.MyImage, I used this.src)
<img
onMouseOver="this.src='ico/view.hover.png';"
onMouseOut="this.src='ico/view.png';"
src="ico/view.png" alt="hover effect" />
It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.
I have an image tag enclosed in an anchor element like this:
<a href='$image'><img alt='No Image' src='$image'></a>
I find that if the image is absent, I can still click on the link. I want to disable the link if the image is absent. What is the best way to do this?
Update:
I have tried mplungjan's solution below but it didn't work. I am willing to try jquery if javascript can't do the job.
This version works:
<a href='$image'>
<img alt='No Image' src='$image' onError="this.parentNode.onclick=function() {return(false);}">
</a>
You can see it in action here: http://jsfiddle.net/jfriend00/2jb4G/
Or, using a common function that you can use in multiple places:
<script>
function blockParentLink() {
this.parentNode.onclick = function() {return(false);}
}
</script>
<a href='$image'>
<img alt='No Image' src='$image' onError="blockParentLink()">
</a>
Personally, I think it might just make sense to hide it if it doesn't display rather than block clicks:
<a href='$image'>
<img alt='No Image' src='$image' onError="this.parentNode.style.display = 'none';">
</a>
You can see the hide version here: http://jsfiddle.net/jfriend00/KVUUM/
Disable=true did not work for me
These did (using parentNode ! )
InnerHTML and onclick:
<a href='#'><img alt='No Image' src='$image'
onError="this.parentNode.onclick=function(){return false};
this.parentNode.innerHTML='Image not available'"></a>
Or remove it:
<a href='$image'><img alt='No Image' src='$image'
onError="var lnk= this.parentNode; lnk.parentNode.removeChild(lnk)"></a>
Or replace it:
<a href='$image'><img alt='No Image' src='$image'
onError="var lnk= this.parentNode;
lnk.parentNode.replaceChild(document.createTextNode('No image'), lnk)"></a>
DEMO
This is a small piece of code I found that may be useful to you
<img src="http://www.someurl.com/image.gif" height="100" width="100" onerror="alert('Image missing')">
instead of ALERT you can call a jquery function to remove the hyperlink. Do let me know if you need help with the Jquery function!
I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")