onMouseover anstatt settimeout

Dieses Thema onMouseover anstatt settimeout im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von Ernesto, 24. Feb. 2007.

Thema: onMouseover anstatt settimeout Hallo Deutschland, von JS habe ich nunmal gar keine Ahnung. Aber es gibt ja genügend Scripte im www. Nachfolgendes...

  1. Hallo Deutschland,

    von JS habe ich nunmal gar keine Ahnung. Aber es gibt ja genügend Scripte im www.

    Nachfolgendes Script (Copyright im Code) ist eine kleine Slideshow, die nach einer bestimmten Zeit ein neues Image lädt. Ich hätte aber gerne, dass dies bei einem Mouseover passiert. Also nicht (!) vollautomatisch! Wie stelle ich das in diesem Script an... das heisst: Wo müsste ich was ändern?

    Code:
    	/************************************************************************************************************
    	(C) [url]www.dhtmlgoodies.com[/url], October 2005
    	
    	This is a script from [url]www.dhtmlgoodies.com[/url]. You will find this and a lot of other scripts at our website.	
    	
    	Terms of use:
    	You are free to use this script as long as the copyright message is kept intact. However, you may not
    	redistribute, sell or repost it without our permission.
    	
    	Thank you!
    	
    	[url]www.dhtmlgoodies.com[/url]
    	Alf Magne Kalleland
    	
    	************************************************************************************************************/	
    	// You can modify these three values
    	var slideshow2_noFading = false;	// Just normal show/hide without fading ?
    	var slideshow2_timeBetweenSlides = 2500;	// Amount of time between each image(1000 = 1 second)
    	var slideshow2_fadingSpeed = 20;	// Speed of fading
    	
    	
    	/* Don't change any of these values */
    	var slideshow2_galleryHeigh;	// Height of galery	
    	var slideshow2_galleryContainer;	// Reference to the gallery div
    	var slideshow2_galleryWidth;	// Width of gallery	
    	var slideshow2_slideIndex = -1;	// Index of current image shown
    	var slideshow2_slideIndexNext = false;	// Index of next image shown
    	var slideshow2_imageDivs = new Array();	// Array of image divs(Created dynamically)
    	var slideshow2_currentOpacity = 100;	// Initial opacity
    	var slideshow2_imagesInGallery = false;	// Number of images in gallery
    	
    	function getGalleryImageSize(imageIndex)
    	{
    		if(imageIndex==slideshow2_imagesInGallery){			
    			showGallery();
    		}else{
    			var imgObj = document.getElementById('galleryImage' + imageIndex);
    			var imgWidth = imgObj.width;
    			var imgHeight = imgObj.height;
    			if(imgWidth>50){						
    				var tmpDiv = document.createElement('DIV');
    				tmpDiv.id =->galleryDiv' + imageIndex;
    				tmpDiv.style.visibility =->hidden';
    				tmpDiv.className='imageInGallery';
    				slideshow2_galleryContainer.appendChild(tmpDiv);
    				tmpDiv.appendChild(imgObj);
    				imgObj.style.left = Math.round((slideshow2_galleryWidth - imgWidth)/2)  + px;
    				imgObj.style.top = Math.round((slideshow2_galleryHeight - imgHeight)/2)  + px;
    				tmpDiv.style.visibility =->hidden';
    				slideshow2_imageDivs.push(tmpDiv);
    				imageIndex++;
    				getGalleryImageSize(imageIndex);
    			}else{
    				setTimeout('getGalleryImageSize(' + imageIndex +->)',10);
    			}
    		}		
    	}
    	
    	function showGallery()
    	{
    		if(slideshow2_slideIndex==-1)slideshow2_slideIndex=0; else slideshow2_slideIndex++;	// Index of next image to show
    		if(slideshow2_slideIndex==slideshow2_imageDivs.length)slideshow2_slideIndex=0;
    		slideshow2_slideIndexNext = slideshow2_slideIndex+1;	// Index of the next next image
    		if(slideshow2_slideIndexNext==slideshow2_imageDivs.length)slideshow2_slideIndexNext = 0;
    		
    		slideshow2_currentOpacity=100;	// Reset current opacity
    
    		// Displaying image divs
    		slideshow2_imageDivs[slideshow2_slideIndex].style.visibility =->visible';
    		if(navigator.userAgent.indexOf('Opera')<0){
    			slideshow2_imageDivs[slideshow2_slideIndexNext].style.visibility =->visible';
    		}
    		
    		
    		if(document.all){	// IE rules
    			slideshow2_imageDivs[slideshow2_slideIndex].style.filter =->alpha(opacity=100)';
    			slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter =->alpha(opacity=1)';
    		}else{
    			slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = 0.99;	// Can't use 1 and 0 because of screen flickering in FF
    			slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = 0.01;
    		}		
    		
    
    		setTimeout('revealImage()',slideshow2_timeBetweenSlides);		
    	}
    	
    	function revealImage()
    	{
    		if(slideshow2_noFading){
    			slideshow2_imageDivs[slideshow2_slideIndex].style.visibility =->hidden';
    			showGallery();
    			return;
    		}
    		slideshow2_currentOpacity--;
    		if(document.all){
    			slideshow2_imageDivs[slideshow2_slideIndex].style.filter =->alpha(opacity='+slideshow2_currentOpacity+')';
    			slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter =->alpha(opacity='+(100-slideshow2_currentOpacity)+')';
    		}else{
    			slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = Math.max(0.01,slideshow2_currentOpacity/100);	// Can't use 1 and 0 because of screen flickering in FF
    			slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = Math.min(0.99,(1 - (slideshow2_currentOpacity/100)));
    		}
    		if(slideshow2_currentOpacity>0){
    			setTimeout('revealImage()',slideshow2_fadingSpeed);
    		}else{
    			slideshow2_imageDivs[slideshow2_slideIndex].style.visibility =->hidden';			
    			showGallery();
    		}
    	}
    	
    	function initImageGallery()
    	{
    		slideshow2_galleryContainer = document.getElementById('imageSlideshowHolder');
    		slideshow2_galleryWidth = slideshow2_galleryContainer.clientWidth;
    		slideshow2_galleryHeight = slideshow2_galleryContainer.clientHeight;
    		galleryImgArray = slideshow2_galleryContainer.getElementsByTagName('IMG');
    		for(var no=0;no<galleryImgArray.length;no++){
    			galleryImgArray[no].id =->galleryImage' + no;
    		}
    		slideshow2_imagesInGallery = galleryImgArray.length;
    		getGalleryImageSize(0);		
    		
    	}
    
    Dankbar für jede Hilfe
    Grüße von der Insel
     
  2. Hallo Ernesto,
    das kann doch noch nicht alles sein: Irgendwo im Body-Tag muss es einen Container mit der ID imageSlideshowHolder geben. Kannst Du nicht mal die URL der ganzen Slideshow posten?
    Viele Grüße - Ulrich
     
  3. Hallo Ulrich,

    stimmt - da gibt es einen Container. Sorry. Den ganzen (sehr wenig !!!) HTML Code kann man sich hier anschauen: http://www.modernamberarts.com/popup/startseite.htm

    Das dort aufgerufene start.js ist das oben gepostete.

    Danke für Deine Mühe und sonnige Grüße von der Insel
    Volker alias Ernesto
     
  4. Dann ist es ganz einfach: Ganz am Ende des Funktion showGallery den Aufruf von setTimeout loeschen:
    Code:
    setTimeout('revealImage()',slideshow2_timeBetweenSlides);
    Im HTML-Code hinter
    Code:
    onClick=self.location='[url]http://www.modernamberarts.com'[/url]
    den Mouseover einfuegen:
    Code:
    onMouseover=showGallery();
    Habs jetzt noch nicht ausprobiert, wenn es so nicht funktioniert, müssten wir es genauer untersuchen.
    Viel Erfolg und viele Grüße - Ulrich
     
  5. Das habe ich doch eiskalt mal kurz gemacht, Ulrich. Ergebnis: Die automatische Show findet nun nicht mehr statt und bei Mouseover rasen alle 6 Bilder innerhalb einer Sekunde durch. Also kein Übergang von einem Bild zum anderen und kein Fade-Übergang. Aber immerhin schon ein guter Anfang.

    Gruß Volker
     
  6. Hallo Volker,
    da muss ich (oder jemand anders) dann nochmal genauer hinschauen. Mache ich sobald ich wieder etwas Zeit habe.
     
  7. Versuch mal dieses beim Mouseover:
    Code:
    onMouseover=revealImage();
     
  8. Hab ich gemacht. Pur brachte es nix. Aber dann habe ich mal den Timeout auf 100000 gesetzt. Ist natürlich ein bissle EDV mit der Hand am Arm. Aber der Effekt ist schon nicht ganz schlecht. Manchmal wechselt er zwar zwei Bilder hintereinander, aber die schön langsam.

    Ich schick das gerade mal noch kurz auf den Server. Zum gucken.

    Gruß Volker
     
  9. Hallo Volker,
    also bei mir funktioniert es, sowohl mit IE als auch mit Firefox:
    http://www.ulrichbangert.de/tmp/Ernesto/startseite.htm
    Habe den Timeout in ShowGallery() gelöscht und im Mouseover die Funktion revealImage() aufgerufen, d. h. was bisher im Timeout passierte, erfolgt jetzt durch den Mouseover .
    Viele Grüße - Ulrich
     
  10. Hallo Ulrich,

    stimmt! Habe jetzt gerade auch nochmal den Timeout auskommentiert und die Zeit auf ne zehntel Sekunde gesetzt. (Trau, schau wem....) und siehe da - alles ok. Die Kleinigkeit, dass die Bilder teilweise mehrfach wechseln, wenn die Maus draufbleibt, ist mir eh wurscht. Sollen halt die Leute ein bisschen öfters mit der Maus spielen. Obwohl ich sonst dazu neige, in solchen Dingen päpstlicher, als der Papst zu sein.

    Übrigens: Diese ganze Geschichte war als eine Art Visitenkarte auf CD-ROM gedacht. Deshalb auch der umständliche Weg über pures HTML (mit JS). Habe es dann aber auch vor den eigentlich Shop gesetzt. Nun steh ich natürlich da mit Iframe und Popups. Das Nachladen des Hauptframes habe ich gelöst, falls Google und Co. auf eine Datei im iframe verweist.

    Allerdings habe ich in der robots.txt das ganze Popup Verzeichnis auf Disallow gesetzt. Blöd, wenn Google einen Link findet (jetzt auch wieder hier in Wintotal, weil der Link direkt auf die /popup/startseite.htm verwiesen hat. Dann erscheint nämlich ein Verweis auf dieses Teil.

    Daher hatte ich auch diesen onClick Link auf die Bilder gesetzt, der dann die Hauptseite aufrief, wenn jemand durch einen Suchmaschinenlink so ein Foto und sonst nix zu sehen bekam.

    ABER: Wie komme ich mit einem onClick-Verweis aus dem Popup heraus? Also aus der Seitengröße 640 x 480?

    Du siehst: Kleiner Finger.... Arm ab!?

    Ist es bei Euch noch hell? Bei uns geht gerade die Sonne über La Gomera unter.
    Daher noch sonnige Grüße von hier
    Volker
     
Die Seite wird geladen...

onMouseover anstatt settimeout - Ähnliche Themen

Forum Datum
OnMouseOver Webentwicklung, Hosting & Programmierung 6. Apr. 2007
HTML- anstatt Standard-Ansicht bei Gmail mit Chrome E-Mail-Programme 17. Apr. 2014
Excel "=" Zeichen Anstatt der "fx" Taste vor der Eingabzeile Windows XP Forum 21. Dez. 2011
Firefox: Foxit Reader anstatt Adobe Reader wählen Web-Browser 25. Juni 2010
Vista sperrt nur Benutzer anstatt in den Ruhezustand zu gehen Windows Vista Forum 21. Jan. 2009