Skip to main content

zoom in & zoom out javascript code onMouseover & onMouesout example

(24)zoom in & zoom out  javascript code onMouseover & onMouesout example:

<html>
<BODY>
<script>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
    {

    nW=iWideSmall;
    nH=iHighSmall;
    }
else
    {

    nW=iWideLarge;
    nH=iHighLarge;
    }

whichImage.style.width=nW;
whichImage.style.height=nH;
}
</script>
<table >
 <tr>
 <td >       
 <img border="0"  src="1.png" width="100" height="100"onMouseOut="zoomToggle('100px','100px','200px','200px',this);" onMouseOver="zoomToggle('300px','300px','400px','400px',this);">
 <br>
 </td>
 </tr>
 </table>
</body>
</html>

(25)Gallery  Code example in  Javascript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simple Photo Gallery with HTML and JavaScript</title>

<style type="text/css">
body {
background: #222;
margin: 0;
}
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
</style>
</head>

<body>
<div class="gallery" align="center">
<h3>Simple HTML Photo Gallery with JavaScript</h3>

<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="1.png" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="php_img.png" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="2.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="1.png" alt=""/>
</div>

</div> <!-- Close the gallery div -->
</body>
</html>

Comments

Popular posts from this blog

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><