You must Sign In to post a response.
  • Category: HTML

    How to do Image ZOOM on mouse over ?


    Are you looking for a way to ZOOM image on mouse over ? then read this thread to know how to zoom it



    Hi

    I have list of images like img1 img2 img3 img4
    img5 ing6 img7 img8

    now i want to show big image on mouse over of small image ....it works but when mouseover to last image in row like img4 ...then big image popup flickers
    how to solve this

    below is the js and css

    /*
    Simple Image Trail script- By JavaScriptKit.com
    Visit http://www.javascriptkit.com for this script and more
    This notice must stay intact
    */

    var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset15 25
    var displayduration=0; //duration in seconds image should remain visible. 0 for always.

    var defaultimageheight = 40; // maximum image size.
    var defaultimagewidth = 40; // maximum image size.

    var timer;

    function gettrailobj(){
    if (document.getElementById)
    return document.getElementById("preview_div").style
    }

    function gettrailobjnostyle(){
    if (document.getElementById)
    return document.getElementById("preview_div")
    }


    function truebody(){
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }


    function hidetrail(){
    gettrailobj().display= "none";
    document.onmousemove=""
    gettrailobj().left="-500px"
    clearTimeout(timer);
    }

    function showtrail(imagename,title,width,height){
    i = imagename
    t = title
    w = width
    h = height
    timer = setTimeout("show('"+i+"',t,w,h);",200);
    }
    function show(imagename,title,width,height){

    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
    var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

    if( (navigator.userAgent.indexOf("Konqueror")==-1 || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {
    ( width == 0 ) ? width = defaultimagewidth: '';
    ( height == 0 ) ? height = defaultimageheight: '';

    width+=30
    height+=55
    defaultimageheight = height
    defaultimagewidth = width

    document.onmousemove=followmouse;


    newHTML = '<div class="border_preview" style="width:'+ width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading image preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
    newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'

    newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
    newHTML = newHTML + '</div>';

    if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
    newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
    }

    gettrailobjnostyle().innerHTML = newHTML;
    gettrailobj().display="block";
    }
    }

    function followmouse(e){

    var xcoord=offsetfrommouse[0]
    var ycoord=offsetfrommouse[1]

    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

    if (typeof e != "undefined"){
    if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
    xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
    } else {
    xcoord += e.pageX;
    }
    if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
    ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
    } else {
    ycoord += e.pageY;
    }

    } else if (typeof window.event != "undefined"){
    if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
    xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
    } else {
    xcoord += truebody().scrollLeft+event.clientX
    }
    if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
    ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
    } else {
    ycoord += truebody().scrollTop + event.clientY;
    }
    }
    gettrailobj().left=xcoord+"px"
    gettrailobj().top=ycoord+"px"

    }

    /* alt.js */

    var timerId = null
    var obj = new Array()

    function prepareShowAlt(event){
    idd = this.id
    if (idd.search("title_") == 0){
    idd = idd.substring(6)
    if ((typeof titles != "undefined") && (typeof titles[idd] != "undefined") && titles[idd].length > 0){
    text = titles[idd]
    }else{
    return;
    }
    }else{
    return
    }

    x = 0;
    y = 0;
    oX = 0;
    if (document.all){
    x = window.event.clientX
    y = window.event.clientY + document.body.scrollTop
    }else{
    x = event.clientX - oX
    y = event.clientY + window.scrollY
    }
    x += Math.round(xs[idd])
    y += Math.round(ys[idd])

    obj = new Array()
    obj[0] = text
    obj[1] = x
    obj[2] = y

    timerId = setTimeout("showAlt()", 500);
    }

    function showAlt(){
    text = obj[0]
    x = obj[1]
    y = obj[2]
    altd = document.getElementById('altDiv')
    altd.innerHTML = "<table cellpadding=3 cellspacing=0 style='background-color: #EEF6FF; border: solid #6A91B4 1px; font-family: tahoma;" + (text.length > 30 ? "width: 200px;" : "") +"'><tr><td style='color: #414041; font-size: 11px;'>" + text + "</td></tr></table>"
    altd.style.left = Math.min(x + 10,document.body.clientWidth-201)
    altd.style.top = y
    altd.style.display = 'inline'
    }

    function hideAlt(){
    obj = new Array()
    clearTimeout(timerId)
    altd = document.getElementById('altDiv')
    altd.innerHTML = ""
    altd.style.left = -100
    altd.style.top = -100
    altd.style.display = 'none'
    }

    function initAlts(){
    arr = document.getElementsByName('title')
    titles = new Array()
    xs = new Array()
    ys = new Array()
    for (i=0; i<arr.length; i++){
    itemm = arr.item(i)
    itemm.onmouseover = prepareShowAlt
    itemm.onmouseout = hideAlt
    itemm.id = "title_" + i
    titles[i] = itemm.title
    xs[i] = (typeof itemm.xs == 'undefined' ? 0 : itemm.xs)
    ys[i] = (typeof itemm.ys == 'undefined' ? 0 : itemm.ys)
    itemm.title = ""
    }
    }

    /* loader.js */

    var t_id = setInterval(animate,20);
    var pos=0;
    var dir=2;
    var len=0;

    function animate()
    {
    var elem = document.getElementById('progress');
    if(elem != null) {
    if (pos==0) len += dir;
    if (len>32 || pos>79) pos += dir;
    if (pos>79) len -= dir;
    if (pos>79 && len==0) pos=0;
    elem.style.left = pos;
    elem.style.width = len;
    }
    }

    function remove_loading() {
    this.clearInterval(t_id);
    var targelem = document.getElementById('loader_container');
    targelem.style.display='none';
    targelem.style.visibility='hidden';
    var t_id = setInterval(animate,60);
    }

    css

    a:hover {
    text-decoration:none;
    }

    a {
    text-decoration:none;
    }

    #interface1 {
    z-index:1;
    }

    #loader_container {
    text-align:center;
    position:absolute;
    top:40%;
    width:100%}

    #loader {
    font-family:Tahoma, Helvetica, sans;
    font-size:10px;
    color:#000000;
    background-color:#FFFFFF;
    padding:10px 0 16px 0;
    margin:0 auto;
    display:block;
    width:135px;
    border:1px solid #6A6A6A;
    text-align:left;
    z-index:255;
    }

    #progress {
    height:5px;
    font-size:1px;
    width:1px;
    position:relative;
    top:1px;
    left:10px;
    background-color:#9D9D94
    }

    #loader_bg {
    background-color:#EBEBE4;
    position:relative;
    top:8px;left:8px;height:7px;
    width:113px;font-size:1px
    }

    .border_preview{
    z-index:100;
    position:absolute;
    /*top:-150px;*/
    background: #fff;
    margin-left:-90px;
    /*border: 1px solid #444;*/
    }

    .preview_temp_load {
    vertical-align:middle;
    text-align:center;
    padding: 10px;
    }
    .preview_temp_load img{
    vertical-align:middle;
    text-align:center;
    }



    /*Image Title Styling*/

    .title_h2 {
    padding:12px 0 0 18px;
    }

    h2 {
    font-size:14px;
    padding:0;
    margin:0;
    font-family: "century gothic";
    }
  • #751478
    Hi Rajiv, Could you please make your requirement clear because you needs to show that image in big size on on mouse over event as per that it will show the image as big if you are dong img4 on mouse over event then it will become big. So what is the issue here. I think its working fine.
    Rajesh B
    To Live More,Learn More

  • #751483
    With the help of CSS3 you can zoom your images on mouse over
    see below snippet

    .zoom{
    width: 320px;
    height: 240px;
    }

    .image {
    width: 100%;
    height: 100%;
    }

    .image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
    }

    .image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
    transform:scale(1.25);
    }

    //call it from HTML
    <div class="zoom">
    <div class="image">
    <img src="a.jpg" alt="Some awesome text"/>
    </div>
    </div>

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #751539
    Hi,
    Does it mean everything works fine and the problem is only flickering of your screen.

    If that is the case please wrap your whole image using a div and see if it works.


    Regards,
    Asheej T K

  • #751581
    HI,

    To zoom the image upon mouse hover, you can simply write the mouse hover property of the CSS. This you can do like below-

    <head>
    <script>
    function bigImg(x)
    {
    x.style.height="64px";
    x.style.width="64px";
    }

    function normalImg(x)
    {
    x.style.height="32px";
    x.style.width="32px";
    }
    </script>
    </head>
    <body>

    <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="your image source" width="32" height="32">
    </body>

    Try this. It will work fine!!

    Thanks,
    Ashutosh Jha
    http://tricksroad.com


  • Sign In to post your comments