mouse over banner

Mr-White

Mr-White

Mr-White

Soldato
Joined
12 Nov 2002
Posts
14,600
Location
In my own little world
How do I create this mouse over banner like what they have over at The Register ?

picng.jpg


MW
 
Can be a bit fiddly, but guessing you want something like this.

http://flowplayer.org/tools/scrollable/navigator.html

Or very simple jquery goes along the lines of

Code: 
<ul>
  <li id="img1">1</li>
  <li id="img2">2</li>
  <li id="img3">3</li>
  <li id="img4">4</li>
</ul>
<div id="image-rotate"></div>

<script type="text/javascript">
$(document).ready(function() { 
  $("li#img1").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img1.jpg')");
  });
  $("li#img2").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img2.jpg'");
  });
  $("li#img3").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img3.jpg'");
  });
  $("li#img4").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img4.jpg'");
  });
});
</script>

Something like that. jQuery isn't my strong suit. There are more elegant ways, but this is simple and understandable.
 
Last edited:
Code: 
<ul>
  <li id="img1">1</li>
  <li id="img2">2</li>
  <li id="img3">3</li>
  <li id="img4">4</li>
</ul>
<div id="image-rotate"></div>

<script type="text/javascript">
$(document).ready(function() { 
  $("li#img1").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img1.jpg')").html("Text 1");
  });
  $("li#img2").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img2.jpg'").html("Text 2");
  });
  $("li#img3").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img3.jpg'").html("Text 3");
  });
  $("li#img4").hover(function() { 
    $("div#image-rotate).css("background-image", "url('path/to/img4.jpg'").html("Text 4");
  });
});
</script>

The functionality is there, just find something to suit what you want.

.html()

I literally just google "replace text in div jquery"
 
Code: 
<style type="text/css"> 
<!--
body {margin:0; padding:0;}
#slidebox{position:relative; border:3px solid #a2b3a1; margin:10px auto;}
#slidebox, #slidebox .content{width:640px;}
#slidebox, #slidebox .container, #slidebox .content{height:300px;}
#slidebox{overflow:hidden;}
#slidebox .container{position:relative; left:0;}
#slidebox .content{background:#eee; float:left;}
#slidebox .content div{padding:0px 0px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;}
#slidebox .next{right:0; margin-right:10px; background:url(images/slidebox_next.png) no-repeat left top;}
#slidebox .next:hover{background:url(images/slidebox_next_hover.png) no-repeat left top;}
#slidebox .previous{margin-left:10px; background:url(images/slidebox_previous.png) no-repeat left top;}
#slidebox .previous:hover{background:url(images/slidebox_previous_hover.png) no-repeat left top;}
#slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;}
#slidebox .thumbs .thumb{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(images/slidebox_thumb.png); color:#fff;}
#slidebox .thumbs .thumb:hover{background:#fff; color:#000;}
#slidebox .selected_thumb{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;}
-->
</style> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
	var autoPlayTime=7000;
	autoPlayTimer = setInterval( autoPlay, autoPlayTime);
	function autoPlay(){
		Slidebox('next');
	}
	$('#slidebox .next').click(function () {
		Slidebox('next','stop');
	});
	$('#slidebox .previous').click(function () {
		Slidebox('previous','stop');
	});
	var yPosition=($('#slidebox').height()-$('#slidebox .next').height())/2;
	$('#slidebox .next').css('top',yPosition);
	$('#slidebox .previous').css('top',yPosition);
	$('#slidebox .thumbs a:first-child').removeClass('thumb').addClass('selected_thumb');
	$("#slidebox .content").each(function(i){
		slideboxTotalContent=i*$('#slidebox').width();	
		$('#slidebox .container').css("width",slideboxTotalContent+$('#slidebox').width());
	});
});
 
function Slidebox(slideTo,autoPlay){
    var animSpeed=1000; //animation speed
    var easeType='easeInOutExpo'; //easing type
	var sliderWidth=$('#slidebox').width();
	var leftPosition=$('#slidebox .container').css("left").replace("px", "");
	if( !$("#slidebox .container").is(":animated")){
		if(slideTo=='next'){ //next
			if(autoPlay=='stop'){
				clearInterval(autoPlayTimer);
			}
			if(leftPosition==-slideboxTotalContent){
				$('#slidebox .container').animate({left: 0}, animSpeed, easeType); //reset
				$('#slidebox .thumbs a:first-child').removeClass('thumb').addClass('selected_thumb');
				$('#slidebox .thumbs a:last-child').removeClass('selected_thumb').addClass('thumb');
			} else {
				$('#slidebox .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
				$('#slidebox .thumbs .selected_thumb').next().removeClass('thumb').addClass('selected_thumb');
				$('#slidebox .thumbs .selected_thumb').prev().removeClass('selected_thumb').addClass('thumb');
			}
		} else if(slideTo=='previous'){ //previous
			if(autoPlay=='stop'){
				clearInterval(autoPlayTimer);
			}
			if(leftPosition=='0'){
				$('#slidebox .container').animate({left: '-'+slideboxTotalContent}, animSpeed, easeType); //reset
				$('#slidebox .thumbs a:last-child').removeClass('thumb').addClass('selected_thumb');
				$('#slidebox .thumbs a:first-child').removeClass('selected_thumb').addClass('thumb');
			} else {
				$('#slidebox .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
				$('#slidebox .thumbs .selected_thumb').prev().removeClass('thumb').addClass('selected_thumb');
				$('#slidebox .thumbs .selected_thumb').next().removeClass('selected_thumb').addClass('thumb');
			}
		} else {
			var slide2=(slideTo-1)*sliderWidth;
			if(leftPosition!=-slide2){
				clearInterval(autoPlayTimer);
				$('#slidebox .container').animate({left: -slide2}, animSpeed, easeType); //go to number
				$('#slidebox .thumbs .selected_thumb').removeClass('selected_thumb').addClass('thumb');
				var selThumb=$('#slidebox .thumbs a').eq((slideTo-1));
				selThumb.removeClass('thumb').addClass('selected_thumb');
			}
		}
	}
}
</script>

Code: 
<div id="slidebox"> 
<div class="next"></div> 
<div class="previous"></div> 
<div class="thumbs"> 
<a href="#" onClick="Slidebox('1');return false" class="thumb">1</a> 
<a href="#" onClick="Slidebox('2');return false" class="thumb">2</a> 
<a href="#" onClick="Slidebox('3');return false" class="thumb">3</a> 
<!--<a href="#" onClick="Slidebox('4');return false" class="thumb">4</a>--> 
</div> 
	<div class="container"> 
	
    	<!--image size 640x300--> 
		
		<!--content 1--> 
		<div class="content"> 
		   	<div><center><a href="url" target="_blank"> <img src="image.jpg" /></a></div> 
		</div> 
        
		<!--content 2-->
		<div class="content"> 
        	<div><a href="url" target="_blank"> <img src="image.jpg" /></a></div> 
		</div> 
		
		<--content 3-->
        <div class="content"> 
        	<div><a href="url" target="_blank"> <img src="image.jpg" /></a></div> 
		</div> 
		
		<--content 4-->
        <div class="content">
        	<div><a href="url" target="_blank"> <img src="image.jpg" /></a></div> 
		</div>  
			
	</div>

I got it working using this :)

MW
 
You must log in or register to reply here.
Back
Top Bottom