Wie geht es?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beitrag
bild
bildergalerie
dan
datei
ecken
encoding
flimmer
gre
gren
klammern
klicken
kopie
lade
lsung
men
optimalen anordnung
paar gedanken
ressource
schein
-
Guten Abend,
Ich habe mir mal wieder ein paar gedanken über meine Homepage gemacht und da ist mir eine Idee Gekommen:
Ich habe eine Bildergalerie, in der die Bilder zur optimalen anordnung geschnitten sind. Durch einen klick auf die Bilder kommt dan dann auf die orginaldatei.
Ich habe schon oft gesehen, dass man, wenn man ein Bild, wenn man darüberfährt, vergrösert sieht.
Jetzt wollte ich mal fragen, mit welcher sprache man das macht.
Mfg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
JavaScript ist da die richtige Wahl.
Hab da mal schnell was zurechtgecodet:
(Lade ich gleich hoch)
http://bladehunter.lima-city.de/javascript/bildervorschau.htm
p.s. Bitte wähle vernünftige Threadtitel !
Edit: Pyrokar schein Probleme zu haben. Daher poste ich den Quelltext einfach mal hier:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">/* <![CDATA[ */
Cy=0;
Cx=0;
function tellCords(Ereignis)
{
if (!Ereignis)Ereignis = window.event;
Cx=Ereignis.clientX;
Cy=Ereignis.clientY;
}
function gross(ressource)
{
Gross=document.getElementById('bildgross');
Gross.parentNode.style.top=(Cy+20)+"px";
Gross.parentNode.style.left=(Cx+20)+"px";
Gross.src=ressource;
}
function klein()
{
document.getElementById('bildgross').src="1-pixel.png";
}
document.onmousemove=tellCords;
/* ]]> */</script>
<img src="mein_bild.png" onmouseover="gross(this.src)" onmouseout="klein()" width="30" height="30" /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="mein_bild.png" onmouseover="gross(this.src)" onmouseout="klein()" width="30" height="30" /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="mein_bild.png" onmouseover="gross(this.src)" onmouseout="klein()" width="30" height="30" /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="mein_bild.png" onmouseover="gross(this.src)" onmouseout="klein()" width="30" height="30" /><img src="mein_bild.png" onmouseover="gross(this.src)" onmouseout="klein()" width="30" height="30" /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="position:absolute;left:0px;top:100px;"><img src="1-pixel.png" id="bildgross" /></div>
</body>
</html>
Beitrag geändert: 8.6.2007 23:16:35 von bladehunter -
Sry für den Titel.
Ich habe es gleich mal ausprobiert und musste feststellen, dass es noch nicht ganz meinen vorstellungen entspricht, aber ich bin die für die bisherige arbeit sehr dankbar.
Ich habe 2 Bilder, ein kleines geschnittenes und ein grosses. Das kleine sollte man dort auch verlinken sollen und es wäre auch gut, wenn man dann das grosse nochmal etwas kleiner machen könnte. -
OK, füge in den folgenden, beiden Funktionen jeweils die 2 neuen Zeilen ein.
function gross(ressource)
{
Gross=document.getElementById('bildgross');
Gross.parentNode.style.top=(Cy+20)+'px';
Gross.parentNode.style.left=(Cx+20)+'px';
Gross.src=ressource;
Gross.width="400";//such dir was aus!
Gross.height="400";//such dir was aus!
}
function klein()
{
document.getElementById('bildgross').src='1-pixel.png';
document.getElementById('bildgross').width="1";
document.getElementById('bildgross').height="1";
}
Wegen der Verlinkung kannst du doch einen ganz normalen <a> Link nehmen.
Beitrag geändert: 8.6.2007 23:42:33 von bladehunter -
Ich habe es gemacht, allerdings kommt jetzt das aufspringende Bild.
Hab ich was falsch gemacht:
<a href=http://www.eomclan.de/Bilder/Alizeefandaten/img001.jpg target=_blank><img src=http://www.eomclan.de/Bilder/Alizeefandaten/img001thumb.jpg onmouseover='gross(this.src)' onmouseout='klein()' width='100' height='100' /><br /><br /><br /><br /><br /><br /><br /><br />
Und wo kann ich die grösse des aufspringenden Bildes einstellen? Geht das dort auch in %? -
Und wo kann ich die grösse des aufspringenden Bildes einstellen? Geht das dort auch in %?
Indem du folgendes aus dem oberen Code anpasst:
Gross.width='400';//such dir was aus!
Gross.height='400';//such dir was aus!
Ich hab deswegen auch "such dir was aus!" dahinter geschrieben.
Wie ich jedoch gerade in SELFHTML gelesen habe, könnte es zu Problemen in bestimmten Browsern kommen http://de.selfhtml.org/javascript/objekte/images.htm#height
Prozentangaben müssten gehen.
edit: Lokale SELFHTML Kopie
Beitrag geändert: 9.6.2007 0:16:52 von bladehunter -
Ich habe es geschafft, es war nur eine Klammer im Weg^^
Aber jetzt bleibt noch ein Wunsch offen:
Kann man machen, dass das aufblendende bild ein anderes ist, als das angezeigte?
Edit: Und ist es möglich, dass sich das Bild dann an die Maus klammert und nicht irgendwo im raum auftaucht?
Edit2:Wenn man sich die beiden Bilder kreuzen und man fäht dort mit der maus drüber, dann fängt das eine bild an zu flimmern, das würde allerdings aufgehoben werden, wenn das mit der Maus klappt ;)
Beitrag geändert: 9.6.2007 1:36:20 von alizee
Beitrag geändert: 9.6.2007 1:43:05 von alizee -
Hallo
Edit: Und ist es möglich, dass sich das Bild dann an die Maus klammert und nicht irgendwo im raum auftaucht?
Diese Frage habe ich mir auch oft gestellt, z.B. im vBulletin-Board, da kann man auf den Benutzernamen klicken, und es öffnet sich ein Dropdown-Menü. Wenn ich sowas probiert habe, dann erscheint das ganze nicht unter dem Namen, sondern oben links in der Ecke (x: 0px, y:0px)
Viele Grüße,
Andy -
Huhuuu...
hab da die Lösung für dich! Meld dich, bei mir auf'm Rechner funzt deine Seite mit den Bildern nahezu perfekt ;)
Kannst dir die zip-Datei dann runterladen... -
http://www.walterzorn.de/tooltip/tooltip.htm
Meiner Meinung nach das beste Tooltip-Script und dazu auch noch sehr leicht einzubauen... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
