• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Gallerie hover-effekt

N

Neko

Neues Mitglied
Hi allesammt! Vornweg, ich bin der totale Noob >.< Eigentlich GrafikDesigner aber ich versuch mir grad des ganze Zeugs wie html & css und so selber beizubringen, deshalb bitte ned glei den Kopf schütteln, okay =) Ich bin Designer, und kein Programmierer... aber deshalb hab ich mich jetz hier angemeldet ^^
Ich hab angefangen an einer Hompage zu basteln... zur Vorstellung, und um zu üben... hab stäääääääändig neue Probleme und versuch mich mit minimalem Wissen und Trial&Error durchzuarbeiten. Iwie klappts dann doch immer *g* aber jetz folgendes:

ich hab auf der Seite eine kleine Gallerie zusammengebaut. Zuerst mit Photoshop, aber dann wollt ichs selber machen damit ich sie soooooo basteln kann wie ich will... soll simple sein und nen kleinen hover-effekt haben...
ned wundern, aber ich hab die Gallerie via Table gemacht. Das Vorschau Bild is schwarz weiß, u wenn man mit der Maus drüber geht, soll des bild in farbe sein... inzwischen weiß ich nimma genau welcher befehl des war, aber ich hab den zum bild ins table gesetzt und alles hat geklappt wie es sollte... selbiges bei bild 2 gemacht, und schon ging garnixmehr...
jetz bin ich umgestiegen auf den css befehl... jetz kann ichs umrandenlassen, aber bildwechsel bekomm ich keinen hin und find au nix drüber.
bla bla bla, ich kann mich hier dusselig reden und euch nur noch mehr verwirren...

also kurz: wie kann ich das ganze so einstellen, dass eben die sw-fassung gegen die farbfassung ausgetauscht wird? für jedes bild einzeln...
also hier mal die Gallerie alleine: from lost days
ich hoffe ihr wisst was ich meine, und ihr verzeiht mir meine verplante schreibweise

(ps: grad beim schreiben kam mir, ich könnte es evtl mit nem verschiebungseffekt machen und beiden fassungen in einer datei... ich versuche es mal nebenbei... aber dennoch würd ich mich über antworten freuen, damit ich das ganze mehr verstehen kann ^^)

grüßchen, Neko
 
Würde es über JavaScript so lösen:

JS:
Code: 
/*
  lädt das farbige Bild
    Pic_num:   Nummer des Bildes
    elem:        Das zu ändernde Bild
*/
function loadColorPic(Pic_num,elem)
{
  elem.src="gallery/original/Lain_"+Pic_num+".jpg";
}

/*
  lädt das Schwarz-Weiße Bild
    Pic_num:   Nummer des Bildes
    elem:        Das zu ändernde Bild
*/
function loadSWPic(Pic_num,elem)
{
  elem.src="gallery/thumb/Lain_"+Pic_num+"_thumb_sw.jpg";
}
Bsp:
Für das erste Bild wäre das:
HTML: 
<img height="125" width="200" border="0" onmouseout="loadSWPic('00',this);" onmouseover="loadColorPic('00',this);" src="gallery/thumb/Lain_00_thumb_sw.jpg">
und für das zweite
HTML: 
<img height="125" width="200" border="0"  onmouseout="loadSWPic('01',this);"  onmouseover="loadColorPic('01',this);"  src="gallery/thumb/Lain_01_thumb_sw.jpg">
 
@ pallino:
danke. nur ich komm mit dem hover-dings einfach nich klar...

@ alogheo:
ebenso danke ^^ warum auch immer, aber Java sieht für mich iwie verständlicher aus als css und html und so... (hatte mal nen kleinen Kurs, bei dem aber ned viel hängen geblieben is >.< )

Also ich hab mal den einen teil in den <script> part mit eingebaut, nur den namen und src ausgetauscht
elem.src="gallery/original/Lain_"+Pic_num+".jpg";
wurde zu
elem.src="gallery/thumb/Lain_"+Pic_num+"_thumb.jpg";
(da dort auch die farbigen thumbs sind...)

jetz gibts allerdings n paar rot unterstrichene parts in meinem Dreamweaver:
href="format.css" wird rot unterstrichen, und die beiden onmouseout und
onmouseover befehle ebenso...
in der gallerie selbst siehts so aus, das nur der graue thumb zu sehn is,
allerdings kein effekt, und link is weg (des mim link is aber logisch)

frage: ich habs in die gallerie selbst kopiert...
hätte ich es ins format.css kopieren müssen? bzw, muß ich die mouse-effekte
nicht noch iwie definieren?

Danke, und sorry für meine blödheit ^^
 
HTML: 
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="expires" content="15 days">
<meta name="revisit" content="after 20 days">
<meta name="design"
content="homepage,webseite,page,internet,seite,webdokument,homepage webseite page internet seite webdokument ">
<meta name="description"
content="homepage, webseite, page, internet seite webdokument ">
<title>from lost days</title>
<!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->
<!-- (c)Copyright by S.I.S.Papenburg / www.easy-vorlagen.de
Lesen Sie auf der genannten Webseite bitte die Nutzungsbedingungen nach.
 -->


<script>
<!--
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}

onload=BlurLinks;

/*
 lädt das farbige Bild
 Pic_num: Nummer des Bildes
 elem: Das zu ändernde Bild
*/
function loadColorPic(Pic_num,elem)
{
 elem.src="gallery/thumb/Lain_"+Pic_num+"_thumb.jpg";
}

/*
 lädt das Schwarz-Weiße Bild
 Pic_num: Nummer des Bildes
 elem: Das zu ändernde Bild
*/
function loadSWPic(Pic_num,elem)
{
 elem.src="gallery/thumb/Lain_"+Pic_num+"_thumb_sw.jpg";
} 
-->
</script>
<link rel="stylesheet" href="format.css" type="text/css">

<style type="text/css">
table td{
line-height:20px
}
table td a{
display:block;
width:100%;
line-height:20px;
background:#000000;
text-decoration:none;
}
table td a:hover{
background:#666666;
}
</style>

</head>
<body  bgcolor="#eoeoeo" text="black"  leftmargin="0" marginwidth="0" >
<table width="700" border="0" id="gallerie">
  <tr>
    <td align="center"><a href="gallery/original/Lain_00.jpg" target="_blank"><img height="125" width="200" border="0" src="gallery/thumb/Lain_00_thumb_sw.jpg" onmouseover="loadColorPic('00',this);" onmouseout="loadSWPic('00',this);"></a></a></td>
    
    
    
    <td align="center"><a href="gallery/original/Lain_01.jpg" target="_blank"><img src="gallery/thumb/Lain_01_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>


    <td align="center"><a href="gallery/original/Lain_02.jpg" target="_blank"><img src="gallery/thumb/Lain_02_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>

  </tr>
  <tr>
    <td align="center"><a href="gallery/original/Lain_03.jpg" target="_blank"><img src="gallery/thumb/Lain_03_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
    <td align="center"><a href="gallery/original/Lain_04.jpg" target="_blank"><img src="gallery/thumb/Lain_04_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
    <td align="center"><a href="gallery/original/Lain_05.jpg" target="_blank"><img src="gallery/thumb/Lain_05_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
  </tr>
  <tr>
    <td align="center"><a href="gallery/original/Lain_06.jpg" target="_blank"><img src="gallery/thumb/Lain_06_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
    <td align="center"><a href="gallery/original/Lain_07.jpg" target="_blank"><img src="gallery/thumb/Lain_07_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>

    <td align="center"><a href="gallery/original/Lain_08.jpg" target="_blank"><img src="gallery/thumb/Lain_08_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
  </tr>
  <tr>
    <td align="center"><a href="gallery/original/Lain_09.jpg" target="_blank"><img src="gallery/thumb/Lain_09_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
    <td align="center"><a href="gallery/original/Lain_10.jpg" target="_blank"><img src="gallery/thumb/Lain_10_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
    <td align="center"><a href="gallery/original/Lain_11.jpg" target="_blank"><img src="gallery/thumb/Lain_11_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
  </tr>
  <tr>
    <td align="center"><a href="gallery/original/Lain_12.jpg" target="_blank"><img src="gallery/thumb/Lain_12_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>

    <td align="center"><a href="gallery/original/Lain_13.jpg" target="_blank"><img src="gallery/thumb/Lain_13_thumb_sw.jpg" width="200" height="125" border="0"></a></a></td>
    <td align="center">&nbsp;</td>
  </tr>
</table>
<!-- beginn hauptinhaltstabelle-->
<!--ende hauptinhaltstabelle-->
</body>
</html>

Ich weiß leider nicht, was bei dir der Fehler ist, deswegen hab ich einfach ma den ganzen bearbeiteten Code gesendet
 
dankeschön für die Mühe die du dir gemacht hast! weiß ich echt zu schätzen!
ich habs mal ganz frech rauskopiert und übertragen ^^
Leider wieder folgende fehler angezeigt:


Hm, und in der Gallerie is der Effekt wieder nur beim 1. Bild (so wie ich es mit nem andrem Code schonmal hatte).
Auf blöd hab ich die externe css mal verschoben, falls da der Fehler sein sollte, aber leider keine Veränderung. (Foto entstand noch vorm verschieben)


edit: jetz kommts mir >.< den code-teil mit dem onmouseover und bla, bei jeder zeile reinkopieren (mit nr-austausch)... ? wird jetz probiert ..... und klappt bei bild 2 schonmal =) ... oki =)
jetz muß ich nur rausfinden, wie ich die graue umrandung beim mouseover wieder raus bekomm, weil keine ahnung mehr wo ich die definiert hab >.<

Aber vielen vielen dank ^^
 
der Link kann auch nur bei dem ersten Bild kommen, weil ich den hover-Effekt auch nur bei einem Bild eingebaut habe^^.
HTML: 
onmouseover="loadColorPic('00',this);" onmouseout="loadSWPic('00',this);"
Diesen teil einfach in jedes Gallerie-Bild reinkopieren und in dem ersten Parameter die Nummer des jeweiligen Bildes angeben

Warum das jetzt rot unterstrichen ist, weiß ich nicht.

edit: graue Umrandung kommt daher:
Code: 
table td a:hover{
   background:#666666; 
}
 
ja, hab ich dann auch gecheckt =) jetz funktioniert alles super ^^
das mit dem grau hab ich au weggebracht...
nur wird jetz wieder alles umgebaut >.< aber der effekt wird nach wie vor gebraucht, deshalb vielen lieben dank an dich ^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben