If you know about how to do something like this,
I mean how to load a javascript or jQuery popUp image onLoad (once) and how can i link it to somewhere else, please help me =(
Thanks a lot..
http://lokeshdhakar.com/projects/lightbox2/
window.onload= function(){
var myEvt = document.createEvent('MouseEvents');
myEvt.initEvent(
'click' // event type
,true // can bubble?
,true // cancelable?
);
document.getElementById('myLink').dispatchEvent(myEvt);
}
here's a tutorial on how to create the modal container
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
once you have it you can trigger the modal window inside
$(document).ready(function(){
// trigger modal here
});
It looks like the div is just set to visible when the page loads.
<div id="lightBox" style="width:100%; height:100%; position:absolute; z-index:1100; background:url(images/bgfb.png);display:block">
<div id="ekranKapla" style="position: absolute; top: 50%; left: 50%; margin-left:-255px; margin-top:-196px;display:block">
<img src="/images/lightbox.png" border="" alt="facebook" useMap="#mapThis" />
</div>
</div>
<map name="mapThis" id="mapThis">
<area shape="rect" coords="470,2,509,37" onclick="javascript:lightBoxKapat();" href="#" />
<area shape="rect" coords="293,294,496,370" href="http://www.facebook.com/EczacibasiToplulugu" target="_blank" title="facebook " />
</map>
<script type="text/javascript">
function lightBoxKapat() {
document.getElementById("lightBox").style.display = "none";
document.getElementById("ekranKapla").style.display = "none";
}
</script>
Then the user can click on it to hide it.
Don't use JavaScript for that - at least not to show it. To have a picture displaying when the page loads, just code the HTML that way.
To show or hide it later, just use:
$("#popupContainer").show();
$("#popupContainer").hide();
Working demo: http://jsfiddle.net/7rVaZ/
Related
i have an image and i would like to assign which element of the area is clickable.
The red stripe shouldn't be clickable.
My HTML solution:
<img src="" data-highres="" usemap="#img">
<map name="img">
<area class="show-modal" shape="rect" cords="" href="">
</map>
So when i click on the white area it should show me a modal window with "this" image.
my jquery solution:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $('').attr("data-highres");
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
When i click on the image(white area) it sould show me a high resulation image in a modal window.
I left the $("") selector empty because i don't know how to select the img attribute -> data-highres=""
I tried with the previous selector but it didn't work.
Actually you have to do the following operations of DOM traversal to get what you need:
Select the parent node of the <area> element, which is <map>. This can be done either using $(this).closest('map') or $(this).parent('map').
Select the image sibling, which is by chaining .prev('img') to the selector above
Therefore, something like this should work:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $(this).closest('map').prev('img').attr('data-highres');
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
You can use below code, modify as per your requirements.
var getData = $('#imgID').data("highres");
console.log(getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="url/to/your/image.jpg" id="imgID" data-highres="high" alt="image_name" usemap="#Map" />
<div name="Map" id="Map">
</div>
Just add a class to your image like this:
<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">
and then make this:
var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello
https://jsfiddle.net/myrma60b/1/
Refer the element by DOM traversal:
$('.show-modal').on('click', function(e){//called when the element with show.modal class is clicked
alert("map area clicked");
});
$('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clicked
alert("previous element of map area is clicked");
});
The later one works for all types of element tags. If you want it to be specific to image types, specify the element type in prev(). i.e.,
$('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clicked
alert("Image is clicked");
});
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<img src="pages/dn/low/dn-02.jpg" data-highres="pages/dn/high/dn-02.jpg" usemap="#image">
<map name="image">
<area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<br>
<img src="pages/dn/low/dn-03.jpg" data-highres="pages/dn/high/dn-03.jpg" usemap="#image">
<map name="image">
<area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<script>
$('.show-modal').on('click', function(){
var $this = $(this).parent('map').prev('img').attr('data-highres');
alert($this);
});
</script>
</body>
</html>
here is simple code. i get all the time the same attr. ->data-highres="pages/dn/high/dn-02.jpg"
I'm trying to make an image appear when I mouse over a certain image map and also still have my other mouseover and mouseout functions working.
I'm using : http://clba.nl/sitepoint/img-hover-demo-js2.htm
Which is basically.
<style>
#img2{
position: fixed;
right:0;
bottom:0;
}
</style>
<script>
var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2");
img2.style.display = "none"; // hide when page is loaded
img1.onmouseover = function(){
img2.style.display = "block";
}
img1.onmouseout = function(){
img2.style.display = "none";
}
</script>
I'm using it now on a website using this method. But instead of <img id="img1" src="images/van4.jpg" alt="" /> I'm using an ID inside my map area. Like this
<map name="map12" id="img_id12">
<area id="img2" class="youtube" coords="3878,24,3957,96" shape="rect" href="https://www.youtube.com/embed/skV-q5KjrUA" style="outline:none;"
onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); "
onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');" />
</map>
This result is my image showing up when I hover over image map. However, it cancels out my other functions. Any tip how to make everything work together?
You're best off using the CSS :hover pseudo class to make img2 appear.
Get rid of img1.onmouseover and img1.onmouseout, and add the following css in your style block:
#img1:hover + #img2 {display:block}
I've created an example fiddle here... https://jsfiddle.net/clayRav/6kvw3ujk/.
When a person clicks on a check box, I want a certain image to appear.
Im not sure if I use jquery, Ajax or not.
What DO I use?
I would appreciate if someone help. I have created the check box already but how do i link it
to a image to show and not to show when checked?
Do you simply want to show the image, or have a toggle effect? Here is how to just show a hidden image.
CSS:
#your_img {
display: none;
}
HTML:
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="a.jpg" alt="A image" style="height: 200px;width:200px">
</div>
Javascript:
Script to show image once. Fiddle: http://jsfiddle.net/826cV/1/
$('#show_image').one("click", function(){
$('#your_img').show();
});
Script to toggle image. Fiddle: http://jsfiddle.net/826cV/
$('#show_image').on("click", function(){
if( $('#your_img').is(':hidden')) {
$('#your_img').show();
}else{
$('#your_img').hide();
}
});
Try this:
HTML:
<input type="checkbox" onclick="show_img()" id="check" value="whatever" name="whatever">whatever</input>
<div id="img"></div>
Javascript:
function show_img(){
if (document.getElementById("check").checked){
document.getElementById("img").innerHTML="<img src='path to your image'>";
}
}
I tried a very simple example for you
<input type="checkbox">Show Image</input>
<img src="a.jpg" alt="A image" style="height: 200px;width:200px">
$(document).ready(function(){
$('img').hide();
$('input:checkbox').change(function(){
this.checked?$('img').show():$('img').hide();
})
});
This is my first post. My code works in chrome and safari, but the slideshow won't stop in firefox. I want to show a live version of this code to make it easier, but I'm working locally. I'm wondering if its because I wrote it with hover instead of mouseover and mouseleave, but I dont know how to write it out correctly that way. There may even be an error in this code, but the browser is not detecting it.
HTML:
<div class="fadelinks">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
jQuery:
jQuery(document).ready(function($) {
$(".fadelinks").each(function(){
var $this = this;
$($this).hover(function(){
$('> :gt(0)', $this).hide();
timer = setInterval(function(){$('> :first- child',$this).fadeOut()
.next().fadeIn().end().appendTo($this);}, 1500);
}, function() {
clearInterval(timer);
});
});
});
a simpler way to achieve is to add onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" to each img tag
then in javascript
mouseoverFunction()
loop through image array
show next
wait
mouseoutFunction()
stop looping
you do not need the a tags
well you want that on mouse hover your images start sliding here is another code i am not so good in jquery but here is the code:
css
#fadelinks{
width: 100px;
height: 100px;
overflow: hidden;
}
set your image height and width equal to the width and height of fadelinks
HTML
<div class="fadelinks">
<a id="same1" href="#"> <img src=""/> </a>
<a id="same2" href="#"> <img src=""/> </a>
<a id="same3" href="#"> <img src=""/> </a>
<a id="same4" href="#"> <img src=""/> </a>
</div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>
jquery
var slide1 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
});
}
var slide2 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
});
} var slide3 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
});
} var slide4 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
});
you will understand what will this do but as i told you i am not so good in jquery so i have done this in you know in noob style. but from this you might get the idea and you can intregate this with event handler mousehover and mouseout and also use setinterval to slide automatically.
thanks.
I did a little bit of poking around for this, but couldn't find the exact thing I am trying to do here. Basically I have an image map, where I wanted to have hidden layers appear over the top of the image on mouseover. There are 5 different hotspots, and 5 different hidden layers that correspond, and show up only when you mouseover the corresponding hotspot.
The problem is this: each of the hidden layers on top contains a PNG with transparent bits, and the PNG is revealed pretty much in the same spot where the user's mouse is. When it is called up by a mouseover, the PNG flickers rapidly...I presume because the page is having trouble determining whether the mouse is over or off the image, due to its transparency...?
Anyone have a clever solution to this?
I've got this in the head:
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
And this in the body of the page:
<div id="homeowners"
style="display:none;
position:absolute;
left:0px;
top:39px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/homeowners-over.png" width="257" height="107" alt="Homeowners" /></div>
<div id="dealers"
style="display:none;
position:absolute;
left:319px;
top:39px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/dealers-over.png" width="257" height="107" alt="Dealers" /></div>
<div id="commercial"
style="display:none;
position:absolute;
left:0px;
top:509px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/commercial-over.png" width="257" height="107" alt="Commercial" /></div>
<div id="importers"
style="display:none;
position:absolute;
left:319px;
top:509px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/importers-over.png" width="257" height="107" alt="Importers" /></div>
<img src="<?php bloginfo('template_directory'); ?>/images/aww_home.jpg" width="586" height="638" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="3,4,293,4,293,25,4,313" href="#"
onmouseover="ShowContent('homeowners'); return true;"
href="javascript:ShowContent('homeowners')"
onmouseout="HideContent('homeowners'); return true;"
href="javascript:HideContent('homeowners')">
<area shape="poly" coords="296,5,583,4,584,312,296,27" href="#"
onmouseover="ShowContent('dealers'); return true;"
href="javascript:ShowContent('dealers')"
onmouseout="HideContent('dealers'); return true;"
href="javascript:HideContent('dealers')">
<area shape="poly" coords="294,32,8,317,295,603,575,318" href="#" />
<area shape="poly" coords="5,322,4,633,294,634,294,608" href="#"
onmouseover="ShowContent('commercial'); return true;"
href="javascript:ShowContent('commercial')"
onmouseout="HideContent('commercial'); return true;"
href="javascript:HideContent('commercial')">
<area shape="poly" coords="299,607,299,634,582,634,580,325" href="#"
onmouseover="ShowContent('importers'); return true;"
href="javascript:ShowContent('importers')"
onmouseout="HideContent('importers'); return true;"
href="javascript:HideContent('importers')">
</map>
Many thanks!
Since you have not mentioned on which elements you have added mouseover and mouseout event handlers, I am going to assume that you are calling showContent to show png when mouse is moved over the div and you are calling hideContent to hide the png when mouse is over the png.
If this is what is happening then the reason for the flicker is:
When mouse is moved over div, the png is shown over the div. Therefore the mouse is now over png due to which mouseover event is fired on png which hides it. Now the mouse is over the div therefore, the mouseover event is fired on div due to which png is shown. This will keep on going.
Solutions:
1. Place the png (on showing) a little further from the mouse so that the png is not directly below the mouse cursor.
2. Or, remove the mouseover event handler from the png and add the mouseout handler to div to hide the png.
I corrected my problem when I added .show to the element that pops up as well. The browser was getting confused when my mouse would transition from one element to the other.
$(function () {
$('.parent_div').hover(function () {
$('.show_popup').show();
}, function () {
$('.show_popup').hide();
});
});
$(function () {
$('.show_popup').hover(function () {
$('.show_popup').show();
});
});