how to code this mouse over effect?

Discussion in 'OT Technology' started by ryan112ryan, Feb 21, 2005.

  1. ryan112ryan

    ryan112ryan New Member

    Joined:
    Aug 21, 2004
    Messages:
    1,484
    Likes Received:
    0
    Location:
    NC
    i looked at the code, but i can't figure out how to do it...anyone know how to do this?

    heres the site, mouse over the pics
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    Those are not pictures, that is text. Those mouse over effect was done with cascading style sheets.

    To learn more, quit being lazy, don't rip off other code, and start reading up on your own. Here is a link to guide you in the right path:

    http://www.w3schools.com/css/default.asp
     
  3. Zourn

    Zourn 16-bit Ninja OT Supporter

    Joined:
    Apr 3, 2002
    Messages:
    2,354
    Likes Received:
    0
    Location:
    Texas
    I personally try to learn how to code something from guides first, but it doesn't generally work as well as taking code that I already know what it does, and then taking pieces out and/or changing them and seeing what effect it has.
     
  4. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    It is cascading style sheets on mouse over effects. I would hardly call that coding. But, oh well. Any CSS tutorial or guide will cover href mouseovers on text. It is self explanatory.
     
  5. tac

    tac (:-|)=|=

    Joined:
    Jan 3, 2001
    Messages:
    21
    Likes Received:
    0
    Location:
    vancouver
    i think he is referring to effect of hovering over the small images producing a larger version of the image to be overlayed above the thumnail image.

    i never looked at the code on that page, but the way i would do it is get the x,y pos of the mouse, offset a bit, then position a div overlayed ontop of everything at that point (look up the z-index property of html elements) and then pop in a image into that div. all the events above would be triggered first by the onmouseover event of the thumbnail image

    so you just need a little javascript for the mouse position calculation + a simple javascript function to do the work of making and positioning the div with desired content + some css to make it look nice.
     
  6. mace

    mace i don't read

    Joined:
    Jun 6, 2004
    Messages:
    12,567
    Likes Received:
    0
    Location:
    Texas
    http://www.g4tv.com/common/g4tvjs/checkplugin.js

    Code:
     
    /**************************************************
    Image Overlay
    **************************************************/
    var imageDB2LargeImageOverlay
    var imageDB2LargeExist = new Array();
    function AddImageDB2Overlay()
    {
     if (!(document.getElementById && document.getElementsByTagName)) return
    
     imageDB2LargeImageOverlay = document.createElement('div');
     imageDB2LargeImageOverlay.setAttribute('id', 'imageDB2LargeImageOverlay');
     imageDB2LargeImageOverlay.style.position = 'absolute';
     imageDB2LargeImageOverlay.style.visibility = 'hidden';
     imageDB2LargeImageOverlay.style.width = '300';
     imageDB2LargeImageOverlay.style.height = '225';
     imageDB2LargeImageOverlay.style.top = '0';
     imageDB2LargeImageOverlay.style.left = '0';
     imageDB2LargeImageOverlay.style.border = '1px solid #000000';
     imageDB2LargeImageOverlay.style.background = '#000000';
     imageDB2LargeImageOverlay.style.zindex = '1000000';
    
     var imageDB2LargeImage = document.createElement('img');
     imageDB2LargeImage.setAttribute('id', 'imageDB2LargeImage');
     imageDB2LargeImageOverlay.appendChild(imageDB2LargeImage);
    
     document.getElementsByTagName('body').item(0).appendChild(imageDB2LargeImageOverlay); 
    
     var imgarr = document.body.getElementsByTagName('img');
     var imgTemp = new Array();
     var current_img;
     var nil_img;
     
     for (var i = 0; i < imgarr.length-1; i++)
     {
      if ( imgarr[i].getAttribute('src').toLowerCase().indexOf('imagedb2') != -1 && ( imgarr[i].getAttribute('src').toLowerCase().indexOf('_m.') != -1 || imgarr[i].getAttribute('src').toLowerCase().indexOf('_s.') != -1) )
      {
       if (!nil_img)
       {
    	nil_img = imgarr[i].getAttribute('src').substr(0, imgarr[i].getAttribute('src').toLowerCase().lastIndexOf('/')+1) + '../nil.gif';
       }
       imgarr[i].onmouseover = function()
       {
    	current_img = this;
    	imageDB2LargeImage.setAttribute('src', this.getAttribute('src').toLowerCase().replace('_m.', '_l.').replace('_s.', '_l.'));
    	
    	if (this.captureEvents) this.captureEvents(Event.MOUSEMOVE);
    	this.onmousemove = MoveImageDB2Overlay;
       }
       
       imgarr[i].onmouseout = function()
       {
    	current_img = null;
    	imageDB2LargeImageOverlay.style.visibility = 'hidden'
    	imageDB2LargeImage.setAttribute('src', nil_img);
    	
    	if (this.releaseEvents) this.releaseEvents(Event.MOUSEMOVE);
    	this.onmousemove = null;
       }
      }
     }
     imageDB2LargeImage.onload = function()
     {
      if (imageDB2LargeImage.getAttribute('src').indexOf('nil.gif') == -1)
      {
       imageDB2LargeImageOverlay.style.visibility = 'visible';
      }
     }
     imageDB2LargeImage.onerror = function()
     {
      imageDB2LargeImageOverlay.style.visibility = 'hidden';
      this.setAttribute('src', nil_img);
      current_img.onmouseover = null;
      current_img.onmouseout = null;
      current_img.onmousemove = null;
     }
    }
    function MoveImageDB2Overlay(evt)
    {
     imageDB2LargeImageOverlay.style.left = (evt ? evt.pageX: window.event.clientX + document.body.scrollLeft) + 15;
     imageDB2LargeImageOverlay.style.top = (evt ? evt.pageY: window.event.clientY + document.body.scrollTop);
    }
    
    
     
  7. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    wow, that's annoying.
     

Share This Page