show function not working with imagemap - javascript

I have an imagemap and want to use the show function to fade in some, rectangle div. But it's not responding.
Javascript
<script type="text/javascript">
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});
</script>
HTML
<img id="logo" src="./logo2.png" alt="Phlox" usemap="#links"><p class="logotext">Phlox</p></img>
<map name="links">
<area shape="circle" coords="294,46,46" href="#" class="levert"></area>
</map>
</div>
<div id="popUpDiv" style="display:none">
</div>
CSS
#popUpDiv {
position:absolute;
background-color:#3F6;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}

Wrap your code in a document ready call:
<script type="text/javascript">
$(document).ready(function() {
$(".levert").click(function() {
$("#popUpDiv").show("slow");
});
});
</script>​

Works for me in Fx17 and Chrome 22 on Mac if I do it after the page loads
$(function() { .... });
DEMO

Related

Access to an image in an object and make it invisible [duplicate]

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; }

an effect onto gallery of images using same javascript

i have the following code using which i implement effects on an image using javascript.
the effect is like when an user hovers on the main image then the over1 and over2 are the two images which gets overlayed on it providing decent information.
now my problem is-- the code i got is for only single images.
when i am implementing it on gallery of images then even i hover on only one image still all images get overlayed with their information.
i need help regarding that if i hover on then other images shouldn't be displaying their info only one should be active.
i also need to know how should i store my images in folders. so far i had decided to make one for main images and other for overlaying images.
my code is
<html>
<head>
<link href="css/overlaycss.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".main").mouseenter(function() {
$(".overlay").show();
});
$(".main").mouseleave(function() {
$(".overlay").hide();
});
$(".main").mouseenter(function() {
$(".overly").show();
});
$(".main").mouseleave(function() {
$(".overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<ul>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
</ul>
</body>
</html>
css is--
li{
position:relative;
float:left;
padding-left:5px;
}
.main {
width:200px;
height:200px;
}
.overlay
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;
}
.overly
{
position:absolute;
height:50px;
width:150px;
bottom:0;
right:0;
display:none;
}
For displaying hover images on individual images try this:-
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find(".overlay").show();
$(this).find(".overly").show();
});
$("ul li").mouseleave(function() {
$(this).find(".overlay").hide();
$(this).find(".overly").hide();
});
});

Show/hide image with JavaScript

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; }

How to change image to text using jquery's .hover event

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>

click eveent to auto event Images change in Jquery

Here my code.. when I click on thumbnail of image Image will display it's ok..
now I need to change the images auto.. not click event ,
so help me to change this javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#img').hide();
$('#img').fadeIn('slow');
$('#img').html('<img src="' + image + '" class="img"/>');
$('#img').
return false;
});
});
</script>
<style>
.img{
border:4px #666 solid;
width:410px; height:350px;
}
.thumb{
float:left;
height:60px;
width:80px;
padding:10px;
}
</style>
<div id="img" ><img src="../content/ohoopee1.jpg" border="0" style="width:410px; height:350px;border:4px #666 solid;" /></div>
<img src="../content/ohoopee1.jpg" class="thumb" border="0"/>
<img src="../content/ohoopee2.jpg" class="thumb" border="0"/>
<img src="../content/ohoopee3.jpg" class="thumb" border="0"/>
<img src="../content/ohoopee4.jpg" class="thumb" border="0"/>
Help to this......
http://jonraasch.com/blog/a-simple-jquery-slideshow
you can go through this tutorial.

Categories

Resources