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

Frage Mouseover Bildzoom

DateYourWeight

DateYourWeight

Mitglied
Folgenden Code habe ich bisher:

HTML: 
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=308x10000:format=jpg/path/s1a90e603f7c01a7a/image/i3cf30a90ae5b03a7/version/1513824962/image.jpg" alt="" onclick=
"javascript:document.getElementById('zoomimage1').style.visibility='visible'" /><a href="" class="zoomimage-zoom" id="zoomimage1" onclick=
"javascript:document.getElementById('zoomimage1').style.visibility='hidden'" name="zoomimage1"><img src=
"https://image.jimcdn.com/app/cms/image/transf/dimension=812x10000:format=jpg/path/s1a90e603f7c01a7a/image/i069ec5cbbef52994/version/1513824957/image.jpg" alt="" /></a>
<table width="100%">
</table>

Kann jetzt auf das Bild klicken und das große Bild erscheint, bleibt auch, allerdings ganz oben.
Wenn ich dann wieder auf das große Bild klicke, scheint er die Seite neu zu laden.
Testseite -> https://cms.e.jimdo.com/app/cms/pre...c=https://testseite-dateyourweight.jimdo.com/

Ich habe mal eine kleine paint-Datei erstellt, damit man mal nachvollziehen kann, was für einen Extrawunsch ich habe. ;-D

Vielen Dank.

Gruß Sarah :)
 

Anhänge

  • kleingross.png
    kleingross.png
    217 KB · Aufrufe: 4
Hallo Aaron3219,

auch hier danke ich dir für die Reaktion. :D

Das Ganze habe ich über Jimdo erstellt (ist noch ganz neu und das ist ja auch nur die Testseite).
Baukasten-Prinzip nennt man das wohl. ;)

Gruß Sarah :)
 
Ja das ist richtig. Es gibt aber auch bei Jimdo die Möglichkeit, seine Seite komplett selber zu schreiben.

Wie hast du es denn realisiert?
Hast du eine Vorlage aus dem Internet runtergeladen?
Was auch immer du gemacht hast, es ist auf jeden Fall nur mittelmäßig gelungen. Das erkennt man z.B. hier:
Unbenannt.PNG

Es ist keine max-size angegeben. Ich empfehle eher eine Lightbox oder zumindest eine maximal-Angabe der Größe.
Sprich:
Gehe in den "Head bearbeiten" Bereich und füge das hier in den style-Tags dazu:
Code: 
zoomimage-zoom > img {
   max-width: 100%;
}

Edit:
Das löst allerdings nicht dein Problem mit dem neuladen der Seite. Deswegen tendiere ich dazu, es einfach selber zu machen oder nochmal nach einem ordentlichen Script zu suchen.
 
ich weiss zwar nicht ob man sowasmachen darf .aber wenn du hier
Code: 
   <a href="" class="zoomimage-zoom" id="zoomimage1" onclick="javascript:document.getElementById('zoomimage1').style.visibility='hidden'" name="zoomimage1"><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1194x10000:format=png/path/s1a90e603f7c01a7a/image/i39d284fdd2f201ba/version/1513999857/image.png" alt=""/></a>


das leere href="" ganz weg machst dann läd er die seite nicht mehr neu. aber ich glaube das ist fusch.da muss mal einer was zu sagen der mehr ahnung davon hat.

EDIT habe bei https://stackoverflow.com/questions/5292343/is-an-anchor-tag-without-the-href-attribute-safe was gefunden das man <a> auch ohne href machen kann. du kannst aber auch aus den <a> tag ein <span> tag machen. das währen jetzt meine ideen. aber es gibt bestimmt noch bessere ideen hier
 
Zuletzt bearbeitet:
Oh das href hab ich gar nicht gesehen... ja wäre theoretisch die Lösung. Wenn du es aber per Script eingebunden hast, wird es schon wieder eine Ecke schwieriger.
Wie gesagt, ich tendiere zu einer Lightbox, die gut funktioniert.
 
Aaron3219 ich habe mich bei jimdo angemeldet (vorerst kostenlos), mir eine Vorlage ausgesucht und bastel seitdem.

Momentan probiere ich einfach vieles aus.

Bin noch ganz neu in dem Bereich. Früher hatte ich mal eine homepage bei beepworld und dort hatte man dann ganz stolz irgendwelche Codes für Besucherzähler oder Animationen eingefügt..
Das man aber real alles mit HTML machen kann, ist wirklich richtig genial.
Es ist ja nichts anderes, als eine Computersprache, man sagt dem Computer, was zu tun ist.
Quasi eine Fremdsprache lernen.

Finde die Vorstellung sehr interessant.. ;)

Wie auch immer: Das mit dem Tipp (href entfernen) hat super funktioniert. Ich experimentiere noch mit der Größe der Bilder, aber die Seite läd schon mal nicht mehr neu - sehr cool und vielen Dank!

Wie kann ich nun bestimmen, wo das größere Bild erscheint?
Habe die sogar mal vervielfacht... ;) Ist ja auch keine große Sache, ich bin trotzdem stolz drauf. :p

Gruß Sarah :)
 
wo soll das bild den hin? mit position top left .oder mit flexboxen und so weiter .aber meistens über top und left. weist du den wo du das bild hin haben möchtest?
 
ich habe dir mal schnell ein bild bei paint zusammen gebastelt.
Ist nur ein Beispiel, um das Prinzip zu erklären.

Wenn ich also auf das linke Bild klicke, erscheint das größere Bild dort, wo die rote Umrandung ist.
Klicke ich auf das mittere = grüne Umrandung
auf das rechte Bild = blaue Umrandung

Gruß Sarah :)
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    90,7 KB · Aufrufe: 6
ja da brauche ich ja nix mehr machen,ist ja jetzt genug auswahl da. das mit der Lightbox ist aufjedenfall ne schönere lösung. wenn du das aber so haben willst wie auf dein bild dann muss du das script von sempervivum nehmen
 
Nochmal danke an alle, wirklich super.

@Sempervivum das sieht super aus, aber: Die Vergrößerung soll ein anderes Bild darstellen und nicht das selbe in größer. Das hatte ich vielleicht etwas unglücklich ausgedrückt. Wenn ich also auf das kleine Bild (A) drücke, dann erscheint das große Bild (B), wobei B ein ganz anderes Bild ist.

@basti1012 ich möchte deine Begeisterung teilen: Was ist eine Lightbox? :D
 
Bin ich blöd, ich hätte mal auf das Bild klicken sollen... :rolleyes:

Das sieht wirklich sehr schick aus.
Wie kann ich denn einstellen, dass das große Bild eben ein anderes Bild ist?

Edit: Und wie man erneut an meiner Homepage sehen kann, mache ich scheinbar in Verbindung fiddle<->jimdo irgendwas gehörig falsch. >.<

Ich brauche doch nur den Code unter HTML zu kopieren und bei jimdo unter HTML einzufügen, oder nicht?

Da -> https://testseite-dateyourweight.jimdo.com
 
Zuletzt bearbeitet:
Kann es vielleicht sein, dass ich irgendwas im "Head bearbeiten" vergessen habe?

Auch deine Idee @Sempervivum (und das ist genau, was ich wollte), setzt meine Homepage nicht um.
Deinen Code nahm er nicht, da der Code kein "https" enthielt, sondern nur "http". Umschreiben in "https" half nicht, sodass ich mir schnell zwei verschiedene Bilder "gepainted" habe. Aber auch hier sieht die Darstellung komplett anders aus.

Siehe: https://testseite-dateyourweight.jimdo.com (ganz runter scrollen)

Folgenden Code habe ich benutzt:

Code: 
<div id="wrap">
    <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img id="largeimg" name="largeimg" />
</div>
 
du solltes ersstmal ein projekt fertig machen . weil du hast jetzt in einer halben stunde immer mehr sachen auf deiner hp gepackt und nicht eins funktioniert richtig . hatte dr eben schon geschrieben da muss struktur rein . so wird das nix.

du musst den scriptcode auch einbinden in deiner hp sonst geht das nicht. ich habe den jetzt nicht gefunden oder ich bin blind
 
Ok, es macht wirklich Spaß, wenn man endlich mal anfängt, ein paar Zusammenhänge zu verstehen. :D
Auch wenn ich glaube, dass ich die Fortgeschrittenen unter euch gerade vermutlich sehr amüsiere.. :cool:

Das Ganze sieht nun wie folgt aus:

Code: 
<div id="wrap">
    <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img src=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i8d7ee4b3ca9b2e8a/version/1515014391/image.png" data-largeimg=
    "https://image.jimcdn.com/app/cms/image/transf/none/path/sfa7f18441f85532a/image/i14b04ee2d0aec0b5/version/1515014400/image.png" /><img id="largeimg" name="largeimg" />
    </div>
<style>
    /* <![CDATA[ */
        #wrap {
            width: 600px;
            height: 600px;
            position: relative;
            line-height: 0;
        }

            #wrap img {
                width: 33.33%;
                height: 33.33%;
            }

            #wrap #largeimg {
                display: none;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
            }
            #wrap #largeimg.visible {
                display: block;
            }
    /*]]>*/
    </style>

Die kleinen Bilder sind nun korrekt angeordnet, allerdings erscheint das große Bild nach Klick nicht..
 
Ich könnte durchdrehen, es funktioniert!! Das ist super, vielen vielen Dank @Sempervivum!!!
Und natürlich an die anderen auch!

Zudem verstehe ich langsam den Zusammenhang zwischen HTML, CSS und Javascript.
Das mag für den einen oder anderen selbstverständlich sein, bedeutet mir gerade aber sehr viel. :D

Danke!
 
ja da habe wir das erste projekt doch schonmal geschaft. wir machen uns nicht lustig alle fangen klein an .ich bin auch noch klein genüber denn anderen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben