bildvergrößereung bei berührung

CSS, Java Script u.s.w

Moderator: HTML-Laie

Antworten
Benutzeravatar
Patrick
Grosser Webmaster
Grosser Webmaster
Beiträge: 732
Registriert: Mi 21. Jul 2010, 15:55
Mein Vorname: Patrick
Wohnort: Bei Münster
Kontaktdaten:
Kontaktdaten von Patrick

bildvergrößereung bei berührung

Beitrag von 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
Nach oben
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8356
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken

Re: bildvergrößereung bei berührung

Beitrag von moni »

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

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

Die groß Angaben kann man ändern !
Viele Grüße ...Monika
Nach oben
Benutzeravatar
Patrick
Grosser Webmaster
Grosser Webmaster
Beiträge: 732
Registriert: Mi 21. Jul 2010, 15:55
Mein Vorname: Patrick
Wohnort: Bei Münster
Kontaktdaten:
Kontaktdaten von Patrick

Re: bildvergrößereung bei berührung

Beitrag von 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
Nach oben
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8356
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken

Re: bildvergrößereung bei berührung

Beitrag von 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 .. :E

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>
Viele Grüße ...Monika
Nach oben
Benutzeravatar
Patrick
Grosser Webmaster
Grosser Webmaster
Beiträge: 732
Registriert: Mi 21. Jul 2010, 15:55
Mein Vorname: Patrick
Wohnort: Bei Münster
Kontaktdaten:
Kontaktdaten von Patrick

Re: bildvergrößereung bei berührung

Beitrag von Patrick »

moni hat geschrieben: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 .. :E

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>
Nach oben
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8356
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken

Re: bildvergrößereung bei berührung

Beitrag von 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
Viele Grüße ...Monika
Nach oben
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 9 Gäste