bildvergrößereung bei berührung

[Patrick]

Hallo zusammen,

hat einer einen code für eine Bildvergrößerung bei berührung?

Mein Vorhaben:
Ich möchte gerne kleine (200 x 150 Px) Vorschaubilder auf meiner Internetseite stellen, die bei Berührung
ein größeres (800 x 600Px) Bild öffnen.

Als ähnliches beispiel könnte ich da ebay nennen. Die haben in der Liste teilweise kleine Lupen, wo durch
berührung mit der Maus sich ein bild öffnet. Und ich möte es gerne von kleines Bild auf großes Bild haben.

Wer kann mir da helfen?

Würde mich freuen, was positives dazu zu hören/lesen

LG
Patrick

[moni]

@Patrick
etwa so soll dein Bild vergrößert werden ?

http://blicke1.npage.de/zoom_bild_85387290.html

Die groß Angaben kann man ändern !

[Patrick]

huhu moni,

ja so habe ich mir das in etwa vorgestellt. Am besten natürlich
so, dass das Bild in der Mitte des Bildschirmes dargestellt würde.
Wie ich sehe hast du bei dem link auch den code dabei.
Wo genau müsste ich diesen einpflegen? Gilt das nur für ein Bild?
Da ich in jeder Rubrik das machen möchte.

LG
Patrick

[moni]

Hallo Patrick

Lasse dir ein andere Code ,meiner Meinung nach ist viel besser ...
man muss ausprobieren ob das CSS in den Skript direkt einbinden soll oder auf jede Text Seite extra ..

Das ganze muss man sich das so vorstellen .
http://blicke.npage.de/zomm_bild_75336414.html

.man kann das Entfernung vom Bilder je nach Bedarf auch ändern
hab das Bild in ein Tabelle reigemacht so kannst den besser auf deiner Seite positionieren

Code: Alles auswählen

 <style type="text/css">



/* Zomm Bild*/

.ienlarger {
        float: left;
        clear: none;
        padding-bottom: 2px;
        padding-right: 2px;
}

.ienlarger a {
        display:block;
        text-decoration: none;
}

.ienlarger a:hover{
        position:static;
}

.ienlarger span img {
        border: 3px solid #FFFFFF;
          margin-bottom: 8px;
}

.ienlarger a span {
        position: absolute;
        display:none;
        color: white;
            text-decoration: none;
        font-family: Arial,
        Helvetica, sans-serif;
        font-size:18px;
         background-color:darkblue;
        font-weight:normal;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
        padding-left: 10px;   /*angaben  zum den großen Fenster*/
}

.ienlarger img {
border-width: 0;
}

.ienlarger a:hover span {
        display:block;
        top: 70px; /*Positsion vom Fenster,Man kann es ändern */
        left: 420px;        z-index: 100;



}

.resize_thumb {
        width: 150px;  /* Große vom Kleinen Bilder*/
        height : auto;
}

/*Ende Galerie*/


</style>



<table width="20%" border="0" cellpadding="0" cellspacing="0">  <table bgcolor="red">

 <tr>

   <td> <div class="ienlarger"><a href=""><img src="Bild URL" alt="thumb" class="resize_thumb" /><span>
    <img src="BILD URL"width="650px" alt="large" /><br />
Bild </span></a></div></td>






</tr>

</table>

[Patrick]

Hallo Patrick

Lasse dir ein andere Code ,meiner Meinung nach ist viel besser ...
man muss ausprobieren ob das CSS in den Skript direkt einbinden soll oder auf jede Text Seite extra ..

Das ganze muss man sich das so vorstellen .
http://blicke.npage.de/zomm_bild_75336414.html

.man kann das Entfernung vom Bilder je nach Bedarf auch ändern
hab das Bild in ein Tabelle reigemacht so kannst den besser auf deiner Seite positionieren

Code: Alles auswählen

 <style type="text/css">



/* Zomm Bild*/

.ienlarger {
        float: left;
        clear: none;
        padding-bottom: 2px;
        padding-right: 2px;
}

.ienlarger a {
        display:block;
        text-decoration: none;
}

.ienlarger a:hover{
        position:static;
}

.ienlarger span img {
        border: 3px solid #FFFFFF;
          margin-bottom: 8px;
}

.ienlarger a span {
        position: absolute;
        display:none;
        color: white;
            text-decoration: none;
        font-family: Arial,
        Helvetica, sans-serif;
        font-size:18px;
         background-color:darkblue;
        font-weight:normal;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
        padding-left: 10px;   /*angaben  zum den großen Fenster*/
}

.ienlarger img {
border-width: 0;
}

.ienlarger a:hover span {
        display:block;
        top: 70px; /*Positsion vom Fenster,Man kann es ändern */
        left: 420px;        z-index: 100;



}

.resize_thumb {
        width: 150px;  /* Große vom Kleinen Bilder*/
        height : auto;
}

/*Ende Galerie*/


</style>



<table width="20%" border="0" cellpadding="0" cellspacing="0">  <table bgcolor="red">

 <tr>

   <td> <div class="ienlarger"><a href=""><img src="Bild URL" alt="thumb" class="resize_thumb" /><span>
    <img src="BILD URL"width="650px" alt="large" /><br />
Bild </span></a></div></td>






</tr>

</table>

Huhu Moni,

mir geht es halt darum zu wissen, wo ich das einpflegen muss. Es sie ja aus als wäre es css und hatml.
Das würde ja bedeuten, dass ich den css teil irgendwo in meine css-datei einpflegen muss und das html
in die jeweilige textseite.

Frage ist nur WO???

Hier mal meine css-Teil

Code: Alles auswählen

html, body, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}
h1 img {
  display: block;
}
img {
  border: 0;
}
a {
  color: #464544;
}
a:hover {
  color: #FFA405;
}
.left {
  float: left;
}
.right {
  float: right;
}
.more {
  text-align: right;
}
.clear {
  clear: both;
}

body {
  background: #C89C52 url() repeat-x;
  text-align: center;
  font: 11px arial, sans-serif;
  color: #E5D19C;
  padding: 20px 0 0 0;
}

/** layout **/
#wrapper {
  text-align: left;
  margin: auto;
  width: 900px;
  position: relative;
}

/** header **/
#header {
  padding-top: 1px;
}
#header h1 {
  font: 32px "Times new roman", serif;
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 35px;
  color: #F2CD91;
  padding: 0 0 0 0.7em;
  margin: -1em 0 0 0;
  line-height: 1;
}
#nav-top {
  margin-left: 503px;
}
#nav-top ul {
  margin: 1em 0 0 0;
  padding: 0;
  height: 31px;
}
#nav-top li {
  float: left;
  background: #C19855 url( http://file1.npage.de/009238/11/bilder/tab_left.gif) no-repeat;
  list-style: none;
  text-align: center;
  font: 18px "Times new roman", serif;
  height: 31px;
  line-height: 31px;
}
#nav-top li div {
  background: top right url(http://file1.npage.de/009238/11/bilder/tab_right.gif) no-repeat;
}
#nav-top li#tab-faq {
  width: 59px;
}
#nav-top li#tab-map {
  width: 99px;
  margin-left: 3px;
}
#nav-top a {
  color: #443816;
  text-decoration: none;
}
#nav-top a:hover {
  color: #241D0A;
}

#nav {
  padding-top: 326px;
  background: url(http://i55.tinypic.com/snnmdc.jpg) no-repeat;
}
#nav ul {
  margin: 0;
  padding: 0;
  height: 36px;
  line-height: 36px;
  border-left: 2px solid #9E9479;
  background: bottom left url(http://file1.npage.de/009238/11/bilder/nav_lit.gif) repeat-x;
}
#nav li {
  list-style: none;
  float: left;
  margin: 0;
  padding: 0 10px;
}
#nav li.home {
  background: bottom left url(http://file1.npage.de/009238/11/bilder/nav_drk.gif) repeat-x;
  padding-left: 25px;
}
#nav a {
  font: 16px "Times new roman", serif;
  color: #FFE5C3;
  text-decoration: none;
}
#nav a:hover {
  color: #F2E7D6;
}

/** content **/

#content {
  padding-left: 20px;
}
#content h2 {
  font: 24px "Times new roman", serif;
  color: #513408;
  font-weight: normal;
  border-left: 3px solid #615331;
  padding: 1px 1px 1px 8px;
  margin-top: 22px;
}
#content p {
  margin-left: 11px;
  line-height: 1.4;
}
#content a {
  color: #8D692D;
  font-weight: bold;
  text-decoration: none;
}
#content a:hover {
  color: #5B431A;
}

#content .left-col {
  float: left;
  width: 700px;
}
#content .right-col {
  float: right;
  width: 170px;
}

#content #welcome {
  margin-right: 40px;
  font-size:13px;
  color: #3E341E;
  heigth: 700px;
}
#content #welcome a{
  color: #3E341E;
  text-decoration:underline;
}
#content #welcome a:hover{
  color: #DBBF77;
  text-decoration:underline;
}
#gallery {
  margin-top: 14px;
}
#gallery .box {
  float: left;
  width: 119px;
  padding: 0 23px 2.3em 23px;
  margin-right: 10px;
  background: #615331;
  position: relative;
  margin-bottom: 15px;

}
#gallery .box h3 {
  text-align: center;
  line-height: 23px;
  font: 23px "Times new roman", serif;
  color: #fff;
  height: 23px;
  margin-bottom: 20px;
  background: top center url(http://file1.npage.de/009238/11/bilder/tab_drk.gif) no-repeat;
}
#gallery .box p {
  margin: 1em 0;
  padding: 0;
  line-height: 1.4;
}
#gallery .box .more {
  height: 18px;
  line-height: 18px;
  background: #978040 top left url(http://file1.npage.de/009238/11/bilder/moretab_left_drk.gif) no-repeat;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.2em;
  padding-right: 4px;
  margin-bottom: 0;
}
#gallery .box .more a {
  color: #4C330D;
}
#gallery .box .more a:hover {
  color: #291B06;
}
#gallery .box-lit {
  background: #735220;
}
#gallery .box-lit h3 {
  background: top center url(http://file1.npage.de/009238/11/bilder/tab_lit.gif) no-repeat;
}
#gallery .box-lit .more {
  background: #B4A26D top left url(http://file1.npage.de/009238/11/bilder/moretab_left_lit.gif) no-repeat;
}

#content .right-col li, #content .right-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#content .right-col li {
  border-left: 1px solid #615331;
  padding-left: 9px;
  margin: 10px;
}
#content .right-col a {
  font-size: 12px;
  font-weight: normal;
  color: #67450D;
}
#content .right-col a:hover {
  color: #2C1D04;
}
/** later **/

#later {
  color: #564929;
}
#later h2 {
  font-size: 20px;
}
#later .right-col p {
  font-size: 12px;
  line-height: 1.7;
}

#later .box {
  float: left;
  width: 85px;

}
#later .box a{
  text-decoration:underline;
}
#later #later-b1 {
  padding-top: 67px;
  margin-right: 4px;
}
#later #later-b2 {
  width: 155px;
  margin-right: 4px;
}
#later #later-b3 {
  width: 114px;
  margin-right: 6px;
}
#later #later-b4 {
  padding-top: 67px;
  width: 137px;
}

#footc {
  height: 10px;
}
#footer {
  background: #735220;
  text-align: center;
  color: #CFB472;
  padding: 14px;
}

und hier ein html-code einer textseite
So sieht sie derzeit aus.
http://patschwork.npage.de/accessoires_80101769.html

Code: Alles auswählen

<p> </p>
<p> </p>

  
  <!-- 1. reihe ANFANG! -->
<center>
<table cellspacing="10" cellpadding="10" border="1" width="900px">
    <tbody>
        <tr>
            <td width="155" valign="top"><center>
            <p><a href="http://file1.npage.de/009238/11/bilder/clutch1_gross.gif" target="_blank">                    <img border="5" alt="" src="http://file1.npage.de/009238/11/bilder/mini_clutch1.jpg" /></a></p>
            <p><a href="http://file1.npage.de/009238/11/bilder/clutch2_gross.gif" target="_blank">                    <img border="5" alt="" src="http://file1.npage.de/009238/11/bilder/mini_clutch2.jpg" /></a></p>
            <p><a href="http://file1.npage.de/009238/11/bilder/clutch3_gross.gif" target="_blank">                    <img border="5" alt="" src="http://file1.npage.de/009238/11/bilder/mini_clutch3.jpg" /></a></p>
            <p> </p>
            </center></td>
            <td align="top" width="345">
            <p><center><span style="font-size: large;"><b><u>Artikelbeschreibung</u></b></span>             </center></p>
            <p style="text-align: center;"><span style="font-size: small;"><b>Clutch "black- Flowers 001"</b></span></p>
            <center>
            <p> </p>
            </center>- Einlagiger Feecemantel mit Bauchgurt- grün mit weißen Punkten
            <p>- NICHT für den Winter geeignen</p>
            <p> </p>
            </td>
            <td align="top" width="210"><center><b><u>Preis</u></b></center>
            <p> </p>
            <center></center><center><u><span style="font-size: large;"><b>18 €<br />
            </b></span></u></center>
            <p> </p>
            <p>inkl. MwSt.</p>
            <p>inkl. Versandkosten</p>
            </td>
            <td align="top" width="190"><center><b><u>Verfügbarkeit</u></b></center>
            <p> </p>
            <center><span style="color: rgb(51, 51, 0);">sofort verfügbar</span></center></td>
        </tr>
    </tbody>
</table>
</center>

<!-- 1. reihe ENDE! -->   



<!-- 2. reihe ANFANG! -->
<center>
<table cellspacing="10" cellpadding="10" border="1" width="900px">
    <tbody>
        <tr>
            <td width="155" valign="top"><center>
            <p><a href="http://file1.npage.de/009238/11/bilder/clutch1_gross.gif" target="_blank">                    <img border="0" alt="" src="http://file1.npage.de/009238/11/bilder/mini_clutch1.jpg" /></a></p>
            <p><a href="http://file1.npage.de/009238/11/bilder/clutch2_gross.gif" target="_blank">                    <img border="0" alt="" src="http://file1.npage.de/009238/11/bilder/mini_clutch2.jpg" /></a></p>
            <p><a href="http://file1.npage.de/009238/11/bilder/clutch3_gross.gif" target="_blank">                    <img border="0" alt="" src="http://file1.npage.de/009238/11/bilder/mini_clutch3.jpg" /></a></p>
            <p> </p>
            </center></td>
            <td width="345" valign="top">
            <p><center><center><span style="font-size: large;"><b><u>Artikelbeschreibung</u></b></span></center></center></p>
            <p style="text-align: center;"><span style="font-size: small;"><b>Clutsch "black- Flowers 002"</b></span></p>
            <center>
            <p> </p>
            </center>- Einlagiger Feecemantel mit Bauchgurt- grün mit weißen Punkten
            <p>- NICHT für den Winter geeignen</p>
            <p> </p>
            </td>
            <td width="210" valign="top"><center><b><u>Preis</u></b></center>
            <p> </p>
            <center></center><center><u><span style="font-size: large;"><b>25 €<br />
            </b></span></u></center>
            <p> </p>
            <p>inkl. MwSt.</p>
            <p>inkl. Versandkosten</p>
            </td>
            <td width="190" valign="top"><center><b><u>Verfügbarkeit</u></b></center>
            <p> </p>
            <center><span style="color: rgb(51, 51, 0);">sofort verfügbar</span></center></td>
        </tr>
    </tbody>
</table>
</center>    

<!-- 2. reihe ENDE! -->



<div class="clear" id="footc"> </div>
<div id="footer">Copyright By “PatschWorks”</div>

[moni]

http://blicke.npage.de/test_seite_mit_z ... 68894.html
Hier ist das CSS von diesen Zoom Bilder in eigens Design eingebunden ,und auf die Text Seite ist nur HTML..und es wird per <div class="ienlarger"> abgerufen ..
man kann auch auf jede Text Seite extra alles angeben CSS und auch HTML...so was ist auch möglich