<marquee> <img src="default.jpg" style="height:180px;width:150px;"> <img src="default.jpg" style="height:180px;width:150px;"> <img src="default.jpg" style="height:180px;width:150px;"> <img src="default.jpg" style="height:180px;width:150px;"> <img src="default.jpg" style="height:180px;width:150px;"> </marquee>
function mover() { document.getElementById("msg").innerHTML="Welcome to Image Effect"; } function mout() { document.getElementById("msg").innerHTML="Byy to all"; }
<form method="POST"> <h2 ALIGN="center"> <font size="5"> </font><h2> <h4 ALIGN="center"> <font color="white" size="15">G</font> <font color="red" size="15">O</font> <font color="yellow" size="15">o</font> <font color="blue" size="15">G</font> <font color="green" size="15">l</font> <font color="white" size="15">e</font> </br> <input type="text" name="first" size="50"><p> <input type="submit" value="google search" name="c"> <input type="submit" value="search" name="o">
<p>Click and slide the blue slider to compare two images:</p> <div class="img-comp-container"> <div class="img-comp-img"> <img src="88.jpg" style="height:300px;width:400px;"> </div> <div class="img-comp-img img-comp-overlay"> <img src="ro.jpg" style="height:300px;width:400px;"> </div> </div>Step-2)Add css
{box-sizing: border-box;} .img-comp-container { position: relative; height: 200px; /*should be the same height as the images*/ } .img-comp-img { position: absolute; width: auto; height: auto; overflow:hidden; } .img-comp-img img { display:block; vertical-align:middle; } .img-comp-slider { position: absolute; z-index:9; cursor: ew-resize; /*set the appearance of the slider:*/ width: 40px; height: 40px; background-color: #2196F3; opacity: 0.7; border-radius: 50%; }Step-3)Add Script
function initComparisons() { var x, i; /*find all elements with an "overlay" class:*/ x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { /*once for each "overlay" element: pass the "overlay" element as a parameter when executing the compareImages function:*/ compareImages(x[i]); } function compareImages(img) { var slider, img, clicked = 0, w, h; /*get the width and height of the img element*/ w = img.offsetWidth; h = img.offsetHeight; /*set the width of the img element to 50%:*/ img.style.width = (w / 2) + "px"; /*create slider:*/ slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); /*insert slider*/ img.parentElement.insertBefore(slider, img); /*position the slider in the middle:*/ slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; /*execute a function when the mouse button is pressed:*/ slider.addEventListener("mousedown", slideReady); /*and another function when the mouse button is released:*/ window.addEventListener("mouseup", slideFinish); /*or touched (for touch screens:*/ slider.addEventListener("touchstart", slideReady); /*and released (for touch screens:*/ window.addEventListener("touchstop", slideFinish); function slideReady(e) { /*prevent any other actions that may occur when moving over the image:*/ e.preventDefault(); /*the slider is now clicked and ready to move:*/ clicked = 1; /*execute a function when the slider is moved:*/ window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { /*the slider is no longer clicked:*/ clicked = 0; } function slideMove(e) { var pos; /*if the slider is no longer clicked, exit this function:*/ if (clicked == 0) return false; /*get the cursor's x position:*/ pos = getCursorPos(e) /*prevent the slider from being positioned outside the image:*/ if (pos < 0) pos = 0; if (pos > w) pos = w; /*execute a function that will resize the overlay image according to the cursor:*/ slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; /*get the x positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x coordinate, relative to the image:*/ x = e.pageX - a.left; /*consider any page scrolling:*/ x = x - window.pageXOffset; return x; } function slide(x) { /*resize the image:*/ img.style.width = x + "px"; /*position the slider:*/ slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } }Execute Script
<script> initComparisons(); </script></pre>
<div class="img-magnifier-container"> <img id="myimage" src="zoom.jpg" style="height:300px;width:570px;"> </div>Step-2)Add css
{box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; }Step-3)Ass Script
function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } }Step 4) Initiate the Magnify Function
<script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script>
<h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6>
function fun1() { document.getElementById("name").style.backgroundColor="red" } function fun2() { document.getElementById("name").style.backgroundColor="yellow" } function fun3() { document.getElementById("a1").style.backgroundColor="red" } function fun4() { document.getElementById("a1").style.backgroundColor="yellow" }