onMouseover anstatt settimeout

  • #1
E

Ernesto

Aktives Mitglied
Themenersteller
Dabei seit
28.01.2007
Beiträge
40
Reaktionspunkte
0
Ort
Guia de Isora - Santa Cruz de Tenerife
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
 
  • #11
Hallo Volker,
bei uns ist es schon eine ganze Weile dunkel. Im Moment eine trübe Zeit, nur so gegen 16 Uhr ist die Sonne mal ein wenig herausgekommen.
Wie komme ich mit einem onClick-Verweis aus dem Popup heraus?
Du kannst ruhig das onClick und das onMouseover nebeneinander stehen lassen, das wird beides funktionieren.
Dass die Bilder am Anfang mehrfach wechseln, habe ich auch gesehen. Ich werde es mir morgen noch mal ansehen, mal sehen, ob ich eine Lösung finde.
Viele Grüße - Ulrich
 
  • #12
Danke Dir soweit Ulrich. Auch wenn Du meine letzte Frage mit dem Popup nun erfolgreich verdrängt hast  ;). Im Prinzip ist auch das kein wirklicher Beinbruch. Dass aber weder top.location noch self.location irgendwie die 640 x 480 Popup Größe sprengen, hat mich schon gewundert.

Allzu oft werden aber keine öffentlichen Verweise in Suchmaschinen auf die Popus zu sehen sein.

Ich werde das Thema mal noch nicht als erledigt abhaken. Vielleicht hast Du ja noch einen Gedankenblitz. Bis dahin Grüße von der Insel

Volker

P.s.: Ein bissle Sonne um 16 Uhr isch aber net grad viel... häh!?

Edit: Eigentlich könnte ich ja ein Popup mit allem Firlefanz aus dem Popup heraus öffnen. Das müsste eigentlich gehen.....

Edit spätnachts: Manchmal kann man sich auch besonders blöd anstellen. Sollte mein Popup über eine Suchmaschine gefunden werden, so befindet es sich ja gar nicht in einem Popup. Ich musste dazu aber erstmal opener einsetzen um das etwas verduzt zur Kenntnis zu nehmen. Die Leitung, auf der ich saß, war besonders lang. Aber nun ist sie gekappt. Danke. :|
 
  • #13
Hallo Volker,
so, das Problem mit dem ständigen Bildwechsel habe ich jetzt auch gelöst. Es lag daran, dass das onMouseover-Event städnig triggerte, wenn durch die Funktion showGallery() das Bild gewechselt wurde. Hier kannst Du es dir ansehen und herunterladen:
http://www.ulrichbangert.de/tmp/Ernesto/startseite.htm
Viele Grüße - Ulrich
 
  • #14
Hallo Ulrich,

Hast Du denn auch was im Javascrip geändert? Und warum ist der Filer meistens auf 0.01 und manchmal uaf 0.74? Nur so aus Neugierde...

Aber danke, dass Du Dich noch weiter reingehängt hast.

Gruss von der Insel
Volker
 
  • #15
Hallo Volker,
ja, ich habe auch am Javascript geändert.
Was meinst Du mit Filer?
Gruß - Ulrich
 
  • #16
Guten Morgen

ich meinte natürlich Filter mit T. Das ist doch ein Filter - oder. Und das JS musste ich mir erstmal auf Deiner Seite suchen. Hab's aber gefunden. Nur mal ganz ehrlich, Ulrich: Ich habe es seiter nur lokal eingebaut und habe trotzdem ab und an mehrere Übergänge. ABER: Die machen mir absolut nix aus. Ich bin eigentlich runherum happy mit Deiner Lösung. Man muss die Leute ja auch nicht verwöhnen.

Sonnige Grüße von hier
Volker
 
  • #17
Hallo Volker,
wenn Du die Seite fertig hast, kannst Du dann mal die Adresse posten oder mir schicken? Ich würde mir gern mal ansehen, wie es mit der Diashow aussieht.
Viele Grüße - Ulrich
 
  • #18
Hi Ulrich,

mach ich gerne. Im Augenblick bau ich das alles local ein und schick so eine Kategorie nach der anderen auf den Server. Colliers sind fertig. Für mich mal eine neue Erfahrung. Eigentlich mache ich immer nur Webseiten und lasse die Kunden diese mit Inhalten füllen. Bei der Schmuckseite mache ich wirklich alles. Inklusive der Fotos. Nebenher noch das ganze andere Marketing außerhalb des Internets.

Ich hatte aber Glück, weil ein Nachbar (Nachbarschaft ist hier relativ - von der Finca, auf der ich lebe, muss man zum nächsten Nachbarn mit dem Auto fahren) Fotograf ist bzw. war, da er aus Altersgründen schon lange nicht mehr arbeitet. Hat mir sein ganzes Fotostudio geliehen und ist bei einigen Aufnahmen ziemlich begeisert. Es kribbelt ihm in den Fingern wieder mit dem Fotografieren anzufangen. Mein Apartment, in dem ich zwar sowieso arbeite, ist im Augenblick mehr Fotostudio, als Wohnraum. Nebenher noch Feriengäste betreuen, Apartments putzen, und wir sind auch noch Reiseveranstalter für die Kanaren (Schwerpunkt La Palma und Teneriffa).

Aber die Schmuckseite ist unser Baby in das wir ordentlich Geld investieren. Eigentlich mehr ein Hobby. Und dafür gemacht, dass unser einziges weibliches Familienmitglied einen eigenen, femininen Geschäftszweig hat. Sie ist von der Slideshow sehr begeistert, da sie nur mit dem FF arbeitet und ich die Übergänge vorher nur für den IE gemacht hatte.

Das war nun ein bisschen außer der Reihe in diesem Forum. Sorry - kommt nicht wieder vor.
Gruß von der Insel
Volker alias Ernesto

Edit: Hatte ich ganz vergessen. Die Popups habe ich schon komplett hochgeladen. Einfach Modern Amber Arts und auf den Schmetterling klicken. Die kleinen Vorschaubilder mache ich übrigens auch noch mit den Übergängen. Das ist das, was bei den Colliers schon geht. Ansonsten kann durchaus mal ne 404 vorkommen. Leider...
 
Thema:

onMouseover anstatt settimeout

ANGEBOTE & SPONSOREN

Statistik des Forums

Themen
113.838
Beiträge
707.959
Mitglieder
51.491
Neuestes Mitglied
haraldmuc
Oben