nivo-slider start erst nach mouse hoover

[mike4]

Hi
ich möchte beim nivo-slider zuerst ein greyscale Bild anzeigen und erst bei einem mouse hoover farbige Bilder einblenden und rotieren.
Vielen Dank

 

[ComFreek]

Dann starte die Funktion vom "nivo-slider" erst nach einem Mouseover.

Zum Beispiel:

window.onload = function()
{
  document.getElementById("deine-id").onmouseover = function()
  {
    nivo-slider.start();
  }
}

 

[mike4]

Vielen Dank aber ich verstehe ID noch nicht. Auch beim greyscale code dasselbe. Nochmals vielen Dank für weitere Hilfe.

--------------

	<title>Easy Slider jQuery Plugin Demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
	
	// On window load. This waits until images have loaded which is essential
	$(window).load(function(){
		
		// Fade in images so there isn't a color "pop" document load and then on window load
		$(".moveSlide").fadeIn(500);
		
		// clone image
		$('.moveSlide').each(function(){   //
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='moveSlide_wrapper' style='display: inline-block'>").clone().addClass('moveSlide_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		// Fade image 
		$('.moveSlide').mouseover(function(){
			$(this).parent().find('moveSlide:first').stop().animate({opacity:1}, 1000);
		})
		$('.moveSlide_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
		});		
	});
	
	// Grayscale w canvas method
	function grayscale(src){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var moveSlideObj = new Image();
		moveSlideObj.src = src;
		canvas.width = moveSlideObj.width;
		canvas.height = moveSlideObj.height; 
		ctx.drawImage(moveSlideObj, 0, 0); 
		var moveSlidePixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < moveSlidePixels.height; y++){
			for(var x = 0; x < moveSlidePixels.width; x++){
				var i = (y * 4) * moveSlidePixels.width + x * 4;
				var avg = (moveSlidePixels.data[i] + moveSlidePixels.data[i + 1] + moveSlidePixels.data[i + 2]) / 3;
				moveSlidePixels.data[i] = avg; 
				moveSlidePixels.data[i + 1] = avg; 
				moveSlidePixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(moveSlidePixels, 0, 0, 0, 0, moveSlidePixels.width, moveSlidePixels.height);
		return canvas.toDataURL();
    }

window.onload = function()
{
  document.getElementById("deine-id").onmouseover = function()
  {
    nivo-slider.start();
  }
}	    
</script>
	<script type="text/javascript">
		$(document).ready(function(){

	
			$("#slider").easySlider({
				auto: true,
				continuous: true,
				nextId: "slider1next",
				prevId: "slider1prev"
			});
			$("#slider2").easySlider({ 
				numeric: true
			});
		});	
	</script>

dann im HTML:

	<div id="portfolio">
		<div id="slider2">
			<ul>				
              <li><div class="moveSlide"><div id="moveSlide"><a href="test.html"></a></a></div></div></li>
              <li><div class="moveSlide"><div id="moveSlide1"><a href="test2.html"></a></a></div></div></li>
              <li><div class="moveSlide"><div id="moveSlide2"><a href="test3.html"></a></a></div></div></li>
              <li><div class="moveSlide"><div id="moveSlide3"><a href="test4.html"></a></a></div></div></li>
              <li><div class="moveSlide"><div id="moveSlide4"><a href="test5.html"></a></a></div></div></li>		
			</ul>
		</div>

	</div>

-------
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover
da steht set target image. Verstehe ich nicht, mit obigen html was soll ich ändern? Dasselbe mit deiner ID.
Danke und Gruss Michael

 

[mike4]

erstmals wie lautet die if mouseover else:

document.getElementById("slider").onmouseover = function()
{

 

[ComFreek]

Bitte schreibe deinen Code in die sog. Code-Tags - z.B. [code=php][/code] - die deinen Code formatieren. Danke!

Jedes Element kann ein Attribut 'id' besitzen, z.B. ein Button:

<button id="mybtn"></button>

Diesen Button kannst du dann mit JS per getElementById ansprechen.

erstmals wie lautet die if mouseover else:

Was meinst du damit?

 

[mike4]

Hi
kein PHP nur html/css. Css sieht so aus:

		#moveSlide a {
			height: 241px;
			width: 696px;
			display: table-cell;
			background: url("../images/01.jpg") 0px 0px no-repeat;
		}

etc.
wie müsste denn obiger Code aussehen um erst nur in Graustufen und ohne autostart anzuzeigen. Erst beim mouse hoover sollte der Slider farbig starten. Derzeit habe ich nur diesen Code korrekt. Im rest steckt der Wurm...Wäre toll wenn du mir helfen könntest.

<script type="text/javascript">
$(document).ready(function(){


$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
$("#slider2").easySlider({
numeric: true
});
});
</script>