✔ Codeschnipsel für on Mouseklick....

M

matze1983

Erfahrenes Mitglied
Hallo,

leider habe ich überhaupt keine Kenntnisse in JavaScript und habe versucht, so gut wie möglich es zu umgehen, jedoch muss ich jetzt resignieren. Da es jedoch sehr lange dauert sich mit der Thematik auseinander zu setzen, ich die Seite aber so schnell wie möglich, "erstmal" fertig stellen möchte, wollte ich mal fragen, ob einer so nett wäre und mir einen eventuell vorhandenen Codeschnipsel geben könnte.
Mein Problem ist folgendes: auf der linken Seite befindet sich ein Container in dem Bilder klein dargestellt werden, nun möchte ich, dass wenn ein USer mit der Mouse auf das Bildchen klickt, sich im rechten Container das Bild in groß darstellt.
Hat da vielleicht jemand was zur Hand?Wäre echt nett!
Mit Gruß Mathias
 
Danke für deinen Tip ich habe ihn mal ausprobiert und habe auch gleich ein par Fragen.

Code: 
<li><a href="#" onclick="swapImage('start','pic01.jpg')"><img src="pic01_th.jpg" alt="load pic01"></a></li>

was bedeutet hier deine src="pic01_th.jpg" - ist das ein Thumbnail?oder das Bild in klein?

bei mir sieht das sehr konfuse aus, wenn du mal auf die Seite schaust:)
http://www.nb-jungs.de/?inhalt=cp
so mal die Bilder erst durch die Auswahl in Klein dargestellt werden sollten und dann in groß in dem container,..ich stelle mal den gesamten code rein, mit PHP-Anhang, vielleicht sieht man als Außenstehender besser durch:-)

Das ist die Seite in der die Elemente hochgeladen werden.
PHP: 
<?
switch($overview)
{
    case best:
    $overview = "seiten/cp/best.php";
    break;
    case top:
    $overview = "seiten/cp/top.php";
    break;
    case schnaps:
    $overview = "seiten/cp/schnaps.php";
    break;


    default:
    $overview= "seiten/cp/start.php";
    break;
}


echo"
<center>
<table border='1' width='100%'>
<tr><td colspan='2'><div height='100px' width='300px' border='1px solid gray'>
    <table border='1' width='100%'>
    <tr> 
    <td><a href='?inhalt=cp&overview=best'><font size='2'>Best of NBJ</td>
    <td><a href='?inhalt=cp&overview=top'><font size='2'>Top20</td>
    <td><a href='?inhalt=cp&overview=schnaps'><font size='2'>Suffgeister</td>
    </tr>
    </table>
</div></td></tr>
<tr><td><div height='100%' width='50%' border='1px solid gray'>";

include($overview); 
echo"</div></td>
<td><div id='imageBox'>
   <img src='pic00.jpg' alt='' name='start'>
</div></td></tr></table>";
?>

Und hier die Seite die aufgerufen wird, wenn man auf das Menu drückt, wo die BIlder noch klein dargestellt werden.
PHP: 
<?
echo"
<center>
	<table>
	 <tr>
	 <td><div align='center'><a href='?inhalt=cp&overview=schnaps&suffgesicht=bild1' onclick='swapImage('start','/bilder/pics/schnaps/schnaps1.jpg')'><img src='/bilder/pics/schnaps/schnaps1.jpg' alt='load /bilder/pics/schnaps/schnaps1.jpg'></a></div></td>
	 <td><div align='center'><a href='?inhalt=cp&overview=schnaps&suffgesicht=bild2' onclick='swapImage('start','/bilder/pics/schnaps/schnaps2.jpg')'><img src='/bilder/pics/schnaps/schnaps2.jpg' alt='load /bilder/pics/schnaps/schnaps2.jpg'></a></div></td>
	 </tr>
</table>";
?>
 
Alle Grafiken mit der Dateinamen-Endung "_th" sind selbsterklärend Thumbnails.

Zunächst solltest du mal die Vorschau-Bilder runterskalieren, oder ist das derzeitige Format (200*223) die kleine Ansicht der Bilder?

Im nächsten Schritt müssen die beiden Anzeigebereiche voneinander getrennt werden, damit nur die Vorschaubilder zum Scrollen sind und die "Image-Box" ihre Position beibehält, ansonsten läuft sie derzeit beim Scrollen nach oben in den nicht-sichtbaren Bereich.

Übrigens vermischt du da HTML-Attribute mit CSS-Eigenschaftswerten:

Code: 
<!-- aus -->
<div height='100px' width='300px' border='1px solid gray'>

<!-- wird -->
<div style="height:100px;width:300px;border:1px solid gray;">
 
Hallo Maik,

vielen Dank erstmal für deine Hilfe. Habe Punkt für Punkt abgearbeitet, wie du es geschildert hast. Dies sieht man nun auch auf der Seite:) jedoch funktioniert es noch nicht, ich vermute mal es liegt an den Variablen die für die Überlieferung der URL dienen.

Denn ich kann mit checkBox nichts anfangen,..es scheint ja nur eine ID zu sein, aber wo wrd sie denn noch verwendet im Script? Und wie übermittel ich nun, wo hin das BId geladen werden soll, normal würde ich es nun mit einer Variablen probieren.
bis jetzt schauts es so aus
Code: 
<a href='?inhalt=cp&overview=schnaps=bild1' onclick='swapImage('start','/bilder/pics/schnaps/schnaps1.jpg')'><img src='/bilder/pics/schnaps/thumb/schnaps1_th.jpg' height='20' width='20' alt='load schnaps1.jpg'></a>
 
Hi,

setz mal diesen Code ein:

Code: 
<a href="#" onclick="swapImage('start','/bilder/pics/schnaps/schnaps1.jpg');return false;"><img src='/bilder/pics/schnaps/thumb/schnaps1_th.jpg' height='20' width='20' alt='load schnaps1.jpg'></a>
 
Vielen Dank, das jetzt haut hin:-)
aber da ich von neugieriger natur bin wieso kannst man hier
Code: 
href="#"
schreiben?

vielen Dank nochmal
 
Wir setzen hier einen leeren "Anker" im href-Attribut, da ja im onclick-Eventhandler die Scriptfunktion ausgelöst wird.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück