Bild erst bei mouseover laden @ tutorials.de: Tutorials, Forum & Hilfe

maga147 · 12.12.06 20:24

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

!

GiFt-ZwErG · 12.12.06 21:07

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

FipsTheThief · 12.12.06 21:17

Oder machs mit Ajax hier mal eine stark vereinfachte Angelegenheit.

HTML-Code:

<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-Code:


<?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...etting_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-Code:

<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.

maga147 · 13.12.06 15:08

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...

FipsTheThief · 13.12.06 17:49

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-Code:

<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-Code:


<?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 

?>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bild erst verdunkeln, Mouseover-Bild normal+eine Art Popup?

bild laden bei mouseover

Swingelemente erst bei MouseOver

Bild, dass bei mouseover angezeigt wird LADEN!

Seite erst laden lassen

E-Mail:

Abonnieren Abbestellen