miner: Bilder durch anklicken verändern

SELF-Forum

Bilder durch anklicken verändern

miner
– Informationen zu den Bewertungsregeln

Hallo,
mit welchen Code bekomme ich es hin, dass meine Bilder auf der Verkaufsseite, sich beim darüberfahren mit dem Cursor selbst vergrößern. Es handelt sich um jpg. Bilder von unterschiedlicher Größe. Von denen sind bis zu 5 Stück in einen Tabellenabschnitt eingebunden, von den Abschnitten gibt es pro Seite jeweils 12.
Bitte die einfachste Variante, ich bin noch Anfänger.
Gruß miner

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilder durch anklicken verändern

    Inita
    – Informationen zu den Bewertungsregeln

    Hai,

    das kannst du auch mit dem CSS machen, kannst du beispiele von dieser seite nehmen:

    1.
    http://www.cssplay.co.uk/menu/photo_simple.html

    2.
    http://www.cssplay.co.uk/menu/magnify.html

    3.
    http://www.cssplay.co.uk/menu/boats.html
    *dies beispiel macht das bild grosser onMouseClick per CSS

    LG, Inita

    P.S. kann man auch mit dem JS machen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder durch anklicken verändern

      miner
      – Informationen zu den Bewertungsregeln

      Nun ja ich hab es mal mit CSS probiert.Wenn es funktioniert sicherlich eine feine Sache aber ich muß es erst einmal so hinbekommen.Das mit den thumbs habe ich irgendwie hinbekommen,aber das "Gallery" Bild macht nicht das was es soll.Es öffnet sich ganz oben auf der Seite leicht rechts und nicht rechts bzw. links in der Tabelle wo es hin sollte.Was habe ich also hier schon wieder falsch gemacht?
      Ich stelle mal am besten die Seite komlett ein,vieleicht kann mir mal einer von euch Praktisch helfen,sprich mir mal genau sagen wo ich den Fehler eingebaut habe.Mit Ausprobieren habe ich es nicht geschafft.Von den Tabellen wo die Bilder rein sollen soll es dann ja auch noch 12 Stück geben.Funktioniert das dann überhaupt noch nach der Methode.Ich wollte sie halt einfach strukturieren um nicht die Übersicht zu verlieren.

      Gruß Ingo

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Unbenanntes Dokument</title>
      <style type="text/css">
      <!--
      .Stil2 {font-family: "Courier New", Courier, mono}
      .Stil4 {font-family: "Courier New", Courier, mono; font-size: large; }
      -->
      <style type="text/css">
      #gallery {position:relative; width:1200px;}
      #thumbs {width:180px; float:left;}
      #thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:50px; border:1px solid #000;}
      #thumbs a img {width:50px; height:50px; border:2; border-color:#FFFFFF}
      #thumbs a:hover {border-color:#fff;}
      #thumbs a:hover img {position:absolute; width:auto; height:auto; right:185px; top:0; border:1px solid #333;}
      </style>
      </head>
      <body bgcolor="#333333">
      <div style="border-width:thick;border-style:outset;border-color:#FF6600">
      <table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#333333">
      <tr>
      <td width="15%"bgcolor="#000000" ><img src="/PDRM0063.jpg" width="194" height="135"></td>
      <td width="85%"><div align="center"><img src="/Text%20Miner2+.jpg" width="740" height="137"></div>
        <div align="center"><br></td>
      </tr>
      </table>
      </div>
      <p></p>
      <table width="100%" border="3" cellpadding="7" cellspacing="0" bgcolor="#FF6600">
          <tr>
            <td width="40%"><div id="showcase">

      <div id="info">

      <div id="gallery">

      <em id="thumbs">
      <a href="#nogo"><img src="/MEXICO3.jpg" title="" alt="" /></a><br>
      <a href="#nogo"><img src="/MEXICO4.jpg" title="" alt="" /></a><br>
      <a href="#nogo"><img src="/MEXICO5.jpg" title="" alt="" /></a><br>
      <a href="#nogo"><img src="/MEXICO6.jpg" title="" alt="" /></a><br>

      </em>
      </div>
         </td>
            <td width="60%"><div align="left">
                   <span class="Stil2"><font color="#FFFFFF">abc000000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxx</font></span>
                   <p><span class="Stil2"><font color="#FFFFFF">xxxx</font></span></p>
                   <p><span class="Stil2"><font color="#FFFFFF">xxxx</font></span></p>
                   <p><span class="Stil2"><font color="#FFFFFF">xxxx</font></span></p>
            </div></td>
          </tr>
      </table>
      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln