I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
Now, I don't know how to make such a link, since normally a link with <a href=...> links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
If you already have a JavaScript function called showImage defined to show the image, you can link as such:
show image
If you need help defining the function, I would try:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
show image
hide image
It's pretty simple.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
This is working code:
<html>
<body bgcolor=cyan>
<img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
<script type="text/javascript">
function tend() {
document.getElementById('my').style.visibility='visible';
}
function tn() {
document.getElementById('my').style.visibility='hidden';
}
</script>
<input type="button" onclick="tend()" value="back">
<input type="button" onclick="tn()" value="close">
</body>
</html>
Here is a working example: http://jsfiddle.net/rVBzt/ (using jQuery)
<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});
You can do this with jquery just visit http://jquery.com/ to get the link then do something like this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').show('slow');
});
});
</script>
or if you would like the link to turn the image on and off do this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').toggle();
});
});
</script>
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
#theImage { display:none; }
Related
How to fire onclick event when click the image ?
and one limitation is that I can't modify testcode2.html.
now the href properties only work.
please help me :( !!
<script>
function go()
{
alert("Hello World!");
}
</script>
<div href="#" onClick="go()">
<iframe src="testcode2.html" />
</div>
testcode2.html is as follows:
<a href="http://translate.google.com">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>
This might help you http://jsfiddle.net/fjGJ5/
jQuery
$(document).ready(function(){
$(".frame").on('click', call);
});
function call(){
alert("I am called.");
}
HTML
<div class="frame">
<iframe src="http://www.jsfiddle.net/" name="iframe_a"></iframe>
</div>
Give the div an ID and then fire the onClick event using jQuery.
<script type="text/javascript" src="jquery-1.10.2.min.js">
$( document ).ready(function() {
$("#divIFrame").click(function(){
alert("Hello World");
});
});
</script>
<div href="#" ID="divIFrame">
<iframe src="testcode2.html" />
</div>
Move your script on testcode2.html
<a href="javascript:go()">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>
Then make the redirect by javascript after alert
To call a Javascript function defined in parent use window.parent
<a href="http://translate.google.com" onclick="window.parent.go();">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/>
</a>
You might want to stop the redirect in which case add a return false to your go() function and then use onclick="return window.parent.go();"
<script>
window.onload = function() {
document.getElementById("test_frame").contentWindow.document.body.onclick = function(){
alert("Hello World!");
};
};
</script>
<iframe id="test_frame" src="testcode2.html" />
EDIT: If you cannot use getElementById(), querySelector() or getElementsByTagName() may work.
<script>
window.onload = function() {
document.querySelector("iframe").contentWindow.document.body.onclick = function(){
alert("Hello World!");
};
/* document.getElementsByTagName("iframe")[0].contentWindow.document.body.onclick
= function(){
alert("Hello World!");
}; */
};
</script>
<iframe id="test_frame" src="testcode2.html" />
In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.
I tried as :
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function() {
$('#load').click(function() {
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Instead of redirecting the visitor to the image like you do here:
window.location.href = img;
You can add an invisible (display: none) image to the page:
<img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />
And show it with your canvas image data like so:
$('#image').attr('src', img).fadeIn(200);
Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.
You can try
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.
<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
In this coding, I want change image and change href also.
here when user click on addtocart.png image, I want to change image to pleasewait.png and when user click on pleasewait.png image, I want to change href like "url2.html", but when i apply my coding image changed but url2.html page also redirect directly.
<a href="#" id=BigSwatch><img id="test" src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
Script
$('#BigSwatch').on({
'click': function(){
$('#test').attr('src','pleasewait.png');
$('#BigSwatch').attr('href','url2.html');
}
});
HTML
<a href="#" id=BigSwatch><img src="addtocart.png" /></a>
in JS
$("#BigSwatch").on("click","img",function(){
$(this).attr("src","pleasewait.png");// here your image path will set
$(this).closest("#BigSwatch").attr("href","ekhle.html");
});
The better way is you can put an anchor with background image. You can follow the simple process -
Keep an anchor with background image "addToCart.png" and with class "addToCart"
On click change the class to "pleasewait" which will change the background-image to "pleasewait.png"
On Click write a function to check, if it has class "addToCart" then prevent default redirection else go to "url2.html".
HTML:
CSS:
.addToCart {
background-image:url('images/addToCart.png');
display:block;
/* Define width and height */
}
.pleaseWait {
background-image:url('images/pleaseWait.png');
}
Javascript:
$('#BigSwatch').click(function(e){
if($(this).hasClass('addToCart')) {
$(this).removeClass('addToCart').addClass('pleaseWait');
e.preventDefault();
}
});
I Hope this would work fine.
You can do this with your HTML mark up only like this
<a href="#" id=BigSwatch onClick="this.href='ekhle.html'">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"
onClick="this.src='https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png'; this.parent.href='ekhle.html'" />
</a>
Live Demo
I have used images from google. :)
try this code.
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
if(info.src.match("pleasewait.png")){
window.location="irl.html";
}
else{
info.src="pleasewait.png";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" onclick="switchHref()"
width="100" height="100"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
doc=document.getElementById("rad");
if(doc.checked==true){
info.src="pleasewait.png";
}
if(info.src.match("pleasewait.png")){
window.location="url.html";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" width="100"
height="100"/>
<input type="radio" id="rad"
onChange="switchHref()" />Click
</body>
</html>
I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
Now, I don't know how to make such a link, since normally a link with <a href=...> links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
If you already have a JavaScript function called showImage defined to show the image, you can link as such:
show image
If you need help defining the function, I would try:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
show image
hide image
It's pretty simple.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
This is working code:
<html>
<body bgcolor=cyan>
<img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
<script type="text/javascript">
function tend() {
document.getElementById('my').style.visibility='visible';
}
function tn() {
document.getElementById('my').style.visibility='hidden';
}
</script>
<input type="button" onclick="tend()" value="back">
<input type="button" onclick="tn()" value="close">
</body>
</html>
Here is a working example: http://jsfiddle.net/rVBzt/ (using jQuery)
<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});
You can do this with jquery just visit http://jquery.com/ to get the link then do something like this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').show('slow');
});
});
</script>
or if you would like the link to turn the image on and off do this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').toggle();
});
});
</script>
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
#theImage { display:none; }
I need a simple script that allows me to change the inner html of a p tag which in my case is an image to just plain text when I hover over it.
Example:
<div id="one">
<p><img src="events.png" alt="" /></p>
</div>
When i hover over the above p tag i want it to change to the text as seen below
<div id="one">
<p>Events</p>
</div>
You don't need to use javascript at all for this. This is handled very simply using css.
<div id="one">
<p>
<span>Events</span>
<img src="events.png" alt="" />
</p>
</div>
CSS:
#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }
Here's a fiddle of it in action: http://jsfiddle.net/CKpCk/
Try the following:
var html = $('#one p').html()
$('#one').hover(function(){
$('p', this).html('Events');
}, function() {
$('p', this).html(html);
})
Demo
Try this one:
<html>
<head>
<title>Try</title>
</head>
<script type="application/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testHover").hover(function()
{
$("#testHover").html("Events");
});
});
</script>
<body>
<div id="one">
<p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
</div>
</body>
</html>