SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying a slider image on mouseover?

    I have an imagemap that I am using to collect user ratings (the image is of a gradient, and the more to the right they click, the higher the rating). I want to essentially keep the same functionality with a small addition:

    I want a slider image to display under the user's mouse when the user is hovering over the imagemap, and I want it to move horizontall whenever the user's mouse moves over the imagemap. This would make the imagemap look like a slider, except the user would still be able to instantly rate without needing to drag a slider (it would simply follow his/her mouse).

    I'm not very familiar with JavaScript, though. If anyone could give me an idea how to write something like this or possibly write some sample code, I would be very grateful. I imagine that something like this is very simple (i.e. just taking the user's horizontal mouse coordinates and overlaying an image), but I really do need help writing it. I don't want to sound lazy, but the project I'm working on has more to do with server-side programming, so it wouldn't be a good idea for me to spend a few days learning all about JavaScript in order to accomplish this small bit of functionality.

    I'd appreciate all the help you are willing to give!

  2. #2
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might try something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Slider+histo by Rambo Tribble</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html,body{height:100%;}
    #slider{position:absolute;height:60px;width:20px;left:0;top:-30px;border:2px solid #fff;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
      document.getElementById('outDiv').onmouseover=movSlid;
    }
    function movSlid(e){
      var evt=e||event;
      targ=document.getElementById('slider');
      var pos_x=targ.offsetLeft; // must use offsetLeft as Konq/Safari doesn't support getPropertyValue('left');
      var new_pos;
      var strt_pt=evt.screenX;
      var histo=document.getElementById('histo01');
      this.onmousemove=function(e){
    	var evt=e||event;
    	var mv_amt=evt.screenX-strt_pt;
    	new_pos=pos_x+mv_amt;
    	if(new_pos<0){  // this block sets the stops on the slider
    	  new_pos=0;
    	}else if(new_pos>576){  // the total width of the widget is 24px and its container 600 px wide
    	  new_pos=576;
    	}
    	document.getElementById('slider').style.left=new_pos+"px";
    	histo.style.height=(pos_x+mv_amt)/2>290? "290px" :(pos_x+mv_amt)/2+"px"; //histo is 290px high
      }
      this.onmouseout=function(){
    	this.onmousemove=function(){;}
      }
    }
    </script>
    </head>
    <body id="pgBod">
    <div id="outDiv" style="position:relative;height:6px;width:600px;background:#dee;background:#000;border:40px solid #dee;">
      
     <!-- the following container div is required to zero the offsetLeft reference between browsers -->
      <div id="slid_cont" style="position:relative;margin:0;padding:0;">
       <!-- slider is the actual widget div, which contains the embellishing divs -->
    	<div id="slider">
    	  <div style="position:relative;height:100%;width:2px;background:#f00;margin:0 auto;"></div>
    	  <div style="position:absolute;top:0;left:0;height:0;width:4px;top:0;border-top:6px solid #f00;
    		border-left:8px solid #dee;border-right:8px solid #dee;"></div>
    	  <div style="position:absolute;bottom:0;left:0;height:0;width:4px;border-bottom:6px solid #f00;
    		border-left:8px solid #dee;border-right:8px solid #dee;"></div>
    	</div>
      </div>
    
    </div>
    <div id="histCont" style="position:relative;top:20px;left:320px;height:290px;width:20px;background:#ede;
      border:20px solid #ded;text-align:center;">
      
      <div id="histo01" style="position:absolute;bottom:0;left:0;height:0;width:20px;margin:0 auto;padding:0; 
    	background:#fad;"></div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's almost exactly what I want! I don't really understand how it works, but would it be possible to have the slider image be under the mouse pointer at all times (it should jump when the mouse moves to a new area)?

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I quite understand what you want. Perhaps if you could make a couple static screen images to show stages of progress in the effect you're looking for, I could get the idea.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •