We Keep Coding

Image to act as a button HTML

Hello I have this code:
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>
And I have this image:
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
</a><a href="tecnologia.html">
I want to know how to change the link on that image to do the same the button does, whats the syntax that I should use, so whenever I click the image it'd trigger the button action and remove the button itself
Thanks

<img onclick="document.getElementById('my-button').click()" src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
or
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>

You can use input type="image"
<input type="image" src="submit.gif" alt="Submit">

Javascript lazy load images by id

I have a page with a very long list of images and I'm looking to lazy load them. But instead of loading the images when they appear in the viewport, I want to load them in order of id when the page is ready. Is there any way to do this?
Here is my markup. My goal would be to load realimg1, realimg2, realimg3, etc in order.
<img src="loading.png" width="300" height="200" id="id1" data-src="realimg1.png">
<img src="loading.png" width="300" height="200" id="id2" data-src="realimg2.png">
<img src="loading.png" width="300" height="200" id="id3" data-src="realimg3.png">
<img src="loading.png" width="300" height="200" id="id4" data-src="realimg4.png">
<img src="loading.png" width="300" height="200" id="id5" data-src="realimg5.png">
Right now, I'm using this plugin just lazy loading images by replacing the src with data-src when the image come into the viewport. How would I do the same thing but do it on load in order of id instead of when they appear in the viewport?

I don't think you will find the lazy loading to be of any use as it's functionality is entirely directed at loading based on images appearing in the viewport.
Check this out:
Hi, this demo might be of interest to you
http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html
and the corresponding tutorial is here:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/
it uses a jQuery plugin that is called like this:
<script type="text/javascript">
$(function(){
$("#gallery").preloader();
});
</script>
Where
<ul id="gallery" class="clearfix">
<li><p><img src="images/1.jpg" /></p></li>
<li><p><img src="images/2.jpg" /></p> </li>
<li><p><img src="images/3.jpg" /></p> </li>
<li><p><img src="images/4.jpg" /></p></li>
<li><p><img src="images/5.jpg" /></p> </li>
</ul>
source: http://wpquestions.com/question/showChrono/id/7959

<script>
function lazyLoader(id){
var images = document.getElementById(id).getElementsByTagName('img');
for(prop in images){
images[prop].setAttribute('src', images[prop].getAttribute('data-src'));
}
}
// should be called after document ready or load -
lazyLoader('lazy_loader');
</script>

You can use the justlazy plugin, which prevents to use external dependencies. It can load by id. You only have to provide the images to load.
For your images you can call the library as follows:
var placeholders = document.querySelectorAll(".some-class-of-images-to-load");
for (var i = 0; i < placeholders.length; ++i) {
Justlazy.lazyLoad(placeholders[i]);
}
The placeholders have to be in the following structure:
<span data-src="default/image" data-alt="some alt text"
class="some-class-of-images-to-load">
</span>
For SEO reasons you can use any other placeholder element.

SVG in Fancybox

I need svg image in fancybox.
<div id="data">
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
Sorry, your browser does not support inline SVG.
</svg>
<img src="http://fc03.deviantart.net/fs71/f/2011/260/e/1/circle_png_by_xdicsii-d4a2odp.png" />
<a id="inline" href="#data" style="margin-left:15px;">Full Screen</a>
</div>
I want to get full screen of the div with id "data".
When i click on "Full Screen" i'm getting full screen of div with id"data" with jpg images, but not the svg image(Which is rendered into the div)

<div style="height:inherit; width:inherit"></div>

Multiple Roll Over Images

Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />

Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.

How can I call div tag element with another div tag element using onclick function

I'm developing an application with Phonegap framework. I want to know how can I call one div tag element with another tag element using onclick Javascript function.
Here is my code:
I need to display second image onclicking the first image. (With CSS style class names:visible/invisible)
<div id="abc" class="visible">
<img style=" z-index:-1" src="icons/firstimage.jpg" width="100%" height="100%" border="0" alt="logo">
</div>
<div id="def" class="invisible">
<img style=" z-index:-1" src="icons/secondimage.jpg" width="100%" height="100%" border="0" alt="logo" >
</div>

You can call a javascript function on click and add class visible to the second div like below,
document.getElementById('def').className = 'visible';
DEMO HERE

You can just include regular JavaScript, below I'm using jQuery but that was just for my convenience.
<div onClick="$('#OtherDiv').html('you click')">test</div>
<div id="OtherDiv"></div>