Bild erst bei mouseover laden

M

maga147

Erfahrenes Mitglied
Hi,

ich möchte ne kleine Bildergallerie basteln, bei der ich immer 50 kleine Thumbbilder auf einen Schwung anzeige.

Wenn man jetzt über dem Bild schwebt (mouseover), sollte das Bild in einer größeren Auflösung dargestellt werden.

Ich hab das ganze jetzt hier mit mal probiert
http://www.walterzorn.de/tooltip/tooltip.htm
und es klappt auch soweit ganz gut.

Nur werden leider alle Bilder schon in Groß vorher geladen, bevor sie überhaupt ge-mouseovered-werden ....
Das macht bei 50 Bildern natürlich keinen sinn.

Ich würde es gerne so haben, dass wenn ich auf ein bildchen geh, kurz "laden" da steht, und wenn das Laden fertig ist, das Bild in Groß erscheint.

Kann mir da jemand weiterhelfen? Die Boardsuche hat mir jedenfalls nichts gebracht...


Danke schon mal :) !
 
Am Anfang der Seite ist bestimmt ein Javascript eingebaut welches die Bilder vorläd, wenn du diese Script entfernst und dann ein Mouseover einbaust müsste das funktionieren.

MFG
 
Oder machs mit Ajax hier mal eine stark vereinfachte Angelegenheit.

HTML: 
<html>
    <head>
        <script type="text/javascript">
	    var Imageview = new Object;
			
	    Imageview.construct = function (imgName) {
				
	        var thisObj = this;
	        thisObj.imgRealName = imgFullName(imgName);
	        thisObj.url         = "showPic.php"; // oder kompletten Pfad angeben ?
	        setHttpRequest();
				
	        function imgFullName (imgName) {
	            var pattern = /thumb_(.*)/;
	            var name = imgName.match(pattern);
		   return name[1];
		}	
				
		function setHttpRequest() {
		    if(window.XMLHttpRequest) {
			thisObj.ajax_request = new XMLHttpRequest();
		    }
					
		thisObj.ajax_request.onreadystatechange = viewImage;
		thisObj.ajax_request.open('GET',thisObj.url+"?showPic="+thisObj.imgRealName,true);
		thisObj.ajax_request.send(null); // für POST Übergaben zum Beispiel
	}
				
	function viewImage() {
	    if(thisObj.ajax_request.readyState == 4) 
		document.write(thisObj.ajax_request.responseText);
		document.close();
	    }
	}
			
	function init(imgName) {
	    var pattern = /.*\/(thumb_.*)/;
	    var thumb_name = imgName.match(pattern);
	    var imgLoader = new Imageview.construct(thumb_name[1]);
	}
    </script>
    </head>
    <body>
		<img src="thumb_2035-Wallpaper-Spiderman.jpg" onmouseover="init(this.src)"></img>
    </body>
</html>

der PHP File dazu ist noch kleiner , es sollte klar sein das da noch mehr möglich ist ;)

PHP: 
<?php
	echo '<img src="'.$_GET['showPic'].'">';
?>

Im Prinzip könnte man ne ganze Klasse dahinter hängen und das Bild obendrein on the fly erstellen. aber es kommt mir momentan so vor als ob er die Seite doch refresht , aber das liegt wohl am Document.write() wenn ich das nun alles in ein Div Layer reinprügeln würde dann sollte kein reload stattfinden.

Empfehlen kann ich diese Seite zu Ajax , ist nn kurzer und knapper einstieg den Rest bekommt man durch rumstesten mit.

http://developer.mozilla.org/de/docs/AJAX:Getting_Started

Wobei mir eben einfällt da brauch man noch nichtmal Ajax dafür , PHP wäre in der Hinsicht gut um zu sehen ob das Bild überhaupt existiert oder es aus der Datenbank zu laden etc, ansonsten könnte man es direkt mit <img src=""> einbinden , naja mal wieder über das Ziel hinausgeschossen warum auch einfach wenn es komplizierter geht.

HTML: 
<html>
	<head>
		<script type="text/javascript">
			var Imageview = new Object;
			
			Imageview.construct = function (imgName) {
				
				var thisObj = this;
				thisObj.imgName = imgName;
				viewImage();
				
				function viewImage() {
					with(document.getElementById('imgView')) {
						var htmlText = '<img src="'+thisObj.imgName+'">';
						innerHTML = htmlText;
					}
				}
			}
			
			function init(imgName) {
			    var pattern = /.*\/thumb_(.*)/;
				var imgName = imgName.match(pattern);
				var imgLoader = new Imageview.construct(imgName[1]);
			}
		</script>
	</head>
	<body>
		<img src="thumb_2035-Wallpaper-Spiderman.jpg" onmouseover="init(this.src)"></img>
		<div id="imgView"></div>
	</body>
</html>

Das wäre die einfachere Version.
 
Zuletzt bearbeitet:
also das mit Ajax wäre schon fein, aber ich komm gar nicht klar... wie muss ich das abspeichern? sorry hab mit Ajax noch gar nichts gemacht...
 
Im Prinzip ist Ajax keine neue Programmiersprache oder sonstiges , das ist einfach eine Technik für JavaScript , ob das noch mit anderen Sprachen geht kA leider.

Also nur JavaScript und eine Instanz der Klasse XMLHttpRequest bilden beim IE ist das ein wenig anders vom Namen her , dies wäre dort das ActivX Steuerelement.

Im Prinzip schickst du mit Ajax (Asynchrones JavaScript and XML) da sieht man es das es JavaScript ist , nur einen Request an den Server. In dem Falle nun eine PHP Datei. Diese nimmt dann die GET oder POST Variablen und macht damit was tolles und gibt das Ergebniss dann zurück.

Vorteil ist das die Seite hier nun nicht neu geladen werden muss. Solltest dich mal einlesen dann einen Link hab ich ja schon gepostet und bei Onkel Google findet man sicher noch wesentlich mehr ;)

Noch mal ein Beispiel dafür , da ich selber noch rumteste damit zur Zeit.

test.html
HTML: 
<html>
	<head>
		<script type="text/javascript">
			var Imageview = new Object;
			
			Imageview.construct = function (imgName) {
				
				var thisObj = this;
				thisObj.imgRealName = imgName;
				thisObj.url         = "showPic.php"; 
				setHttpRequest();
								
				function setHttpRequest() {
					if(window.XMLHttpRequest) {
						thisObj.ajax_request = new XMLHttpRequest(); // das ist die Instanz
					}
					//wenn es Antwort vom Server bekommen hat starte die Funktion viewImage
					thisObj.ajax_request.onreadystatechange = viewImage; 
					// und versenden das ganze thisObj.ajax_request.open('GET',thisObj.url+"?showPic="+thisObj.imgRealName,true);
					thisObj.ajax_request.send(null); // für POST Übergaben zum Beispiel
				}
				
				function viewImage() {
					if(thisObj.ajax_request.readyState == 4) {
						var imgElement = document.createElement('img');
							imgElement.src = thisObj.ajax_request.responseText;
							
						document.getElementById('imgView').appendChild(imgElement);
					}
				}
			}
			
			function init(imgName) {
			    var pattern = /.*\/thumb_(.*)/;
				var name = imgName.match(pattern);
				var imgLoader = new Imageview.construct(name[1]);
			}
		</script>
	</head>
	<body>
		<img src="thumb_2035-Wallpaper-Spiderman.jpg" onmouseover="init(this.src)"></img>
		<div id="imgView"></div>
	</body>
</html>

Das PHP Script , da kann man es schön beobachten
showPic.php
PHP: 
<?php
        // der Name des Bildes welches geladen werden soll
	$img = $_GET['showPic'];
	
        // neues Bild erstellen 800 * 600
	$newImg = imagecreatetruecolor(800,600);
	// aus dem Bild das geladen werden soll ein Bild erstellen
        $oldImg = imagecreatefromjpeg($img);

       // ein Teil vom alten Bild in das neue Bild reinkopieren
	imagecopyresampled($newImg,$oldImg,0,0,0,0,800,600,400,300);
	$blue = imagecolorallocate($newImg,0,0,255);
        // String in das Bild zeichnen
	imagestring($newImg,10,10,2,'Bild wurde on the fly erstellt mit PHP',$blue);
	
        // bild erstellen und unter stats.jpg speichern
	imagejpeg($newImg,'stats.jpg');
	imagedestroy($newImg);
	imagedestroy($oldImg);
	echo 'stats.jpg'; // ausgabe an den Browser senden das fängt das Ajax auf dann wieder 
?>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück