Mouseover Bildzoom funktioniert nicht

Antworten
#1
21.12.2017 04:12
avatar  DateYourWeight
#1
Da
DateYourWeight

Hallo liebe Community!

Ich versuche verzweifelt, den Code für den Mouseover Bildzoom auf meiner Seite einzubetten - aber es funktioniert nicht.
Es handelt sich um folgende Beschreibung "Mouseover Bildzoom": http://www.homepage-baukasten-vergleich....utorial-bilder/

Ich bin die Schritte, wie in der Beschreibung (vor allem beim letzten Versuch) unglaublich pingelig durchgegangen.

Aber wenn ich fertig bin und das Widget/HTML“ Modul gespeichert habe, erscheinen lediglich zwei winzige Kästchen und daneben jeweils Zeichen.


Ich bin ganz neu bei jimdo und scheinbar muss ich ja irgendwas falsch machen, aber was?

Freue mich auf eure Hilfe!

Liebe Grüße,
Sarah :)


 Antworten

 Beitrag melden
#2
21.12.2017 11:42
avatar  TiJo
#2
Ti
TiJo

Ohne den von dir eingefügten Code und deiner URL ist eine Ferndiagnose wohl nicht möglich.


 Antworten

 Beitrag melden
#3
21.12.2017 22:16 (zuletzt bearbeitet: 24.12.2017 16:17)
avatar  DateYourWeight
#3
Da
DateYourWeight

URL:
https://dateyourweight.jimdo.com/

Unter Einstellungen -> Head bearbeiten folgender Code hinterlegt:

1
2
3
4
5
6
7
 
<style type=“text/css“>
 
.zoomimage-container {position: relative;}
.zoomimage-std {}
.zoomimage-zoom {visibility: hidden; position: absolute; z-index: 1; top: 0px; left: 0px;}
</style>
 
 


Auf Homepage eingefügter Code (dort, wo das Bild erscheinen soll, erstmal nur Testbilder):

1
2
3
4
5
6
7
 
<div class="“zoomimage-container“">
    <a class="“zoomimage-std“" href="“https://www.google.de“"><img src=
    "“https://image.jimcdn.com/app/cms/image/transf/dimension=308x10000:format=jpg/path/s1a90e603f7c01a7a/image/i3cf30a90ae5b03a7/version/1513824962/image.jpg“" alt="““" onmouseover=
    "“javascript:document.getElementById(‚zoomimage1‘).style.visibility=’visible'“" /></a> <a href="“https://www.google.de“" class="“zoomimage-zoom“" id="“zoomimage1&#8243;" onmouseout=
    "“javascript:document.getElementById(‚zoomimage1‘).style.visibility=’hidden'“" name="“zoomimage1&#8243;"><img src=
    "“https://image.jimcdn.com/app/cms/image/transf/dimension=812x10000:format=jpg/path/s1a90e603f7c01a7a/image/i069ec5cbbef52994/version/1513824957/image.jpg“" alt="““" /></a>
</div>
 


 Antworten

 Beitrag melden
#4
21.12.2017 22:30
avatar  TiJo
#4
Ti
TiJo

Warum hast du denn überall doppelte Anführungszeichen?


 Antworten

 Beitrag melden
#5
22.12.2017 00:14 (zuletzt bearbeitet: 24.12.2017 16:17)
avatar  DateYourWeight
#5
Da
DateYourWeight

Das hat das Programm irgendwie mit reingearbeitet, auf der Seite steht es jeweils nur mit einem.

Der Code sieht nun so aus:

1
2
3
4
5
6
7
 
<div class="zoomimage-container">
    <a class="zoomimage-std" href="https://www.google.de/"><img src=
    "https://image.jimcdn.com/app/cms/image/transf/dimension=308x10000:format=jpg/path/s1a90e603f7c01a7a/image/i3cf30a90ae5b03a7/version/1513824962/image.jpg" alt="" onmouseover=
    "javascript:document.getElementById(‚zoomimage1‘).style.visibility=’visible'" /></a> <a href="https://www.google.de/" class="zoomimage-zoom" id="zoomimage1" onmouseout=
    "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>
</div>
 



Zwar erscheint nun das kleine Bild und wenn ich drauf klicke, gelange ich auch auf google (hatte ich als Test hinterlegt), aber das große Zoombild erscheint weder beim Rüberfahren, noch beim Draufklicken.


 Antworten

 Beitrag melden
#6
22.12.2017 01:06 (zuletzt bearbeitet: 24.12.2017 16:16)
avatar  DateYourWeight
#6
Da
DateYourWeight

Habe das Problem gelöst!

Im Folgenden versuche ich die Lösung mal für die Leute verständlich zu erklären, die verzweifelt auf diesen Beitrag gestoßen sind.

Mein letzter Beitrag enthielt folgenden Code:

1
2
3
4
5
6
7
 
<div class="zoomimage-container">
<a class="zoomimage-std" href="https://www.google.de/"><img src=
"https://image.jimcdn.com/app/cms/image/transf/dimension=308x10000:format=jpg/path/s1a90e603f7c01a7a/image/i3cf30a90ae5b03a7/version/1513824962/image.jpg" alt="" onmouseover=
"javascript:document.getElementById([rot][b]'[/b][/rot]zoomimage1[rot][b]'[/b][/rot]).style.visibility=[rot][b]'[/b][/rot]visible[rot][b]'[/b][/rot]" /></a> <a href="https://www.google.de/" class="zoomimage-zoom" id="zoomimage1" onmouseout=
"javascript:document.getElementById([rot][b]'[/b][/rot]zoomimage1[rot][b]'[/b][/rot]).style.visibility=[rot][b]'[/b][/rot]hidden[rot][b]'[/b][/rot]" 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>
</div>
 



Zwar wurde hierbei das kleine Bild angezeigt, auch Verlinkung zu Google ging, allerdings erschien das große Bild beim Rüberfahren nicht.

Lösung:

Es waren noch Zeichen ‚ ‘ in dem Code, die das System nicht verarbeiten konnte (?) und die ich durch je ein gewöhliches ' ersetzt habe. (oben farblich markiert)

Liebe Grüße,
Sarah :)


 Antworten

 Beitrag melden
#7
22.12.2017 01:23
avatar  DateYourWeight
#7
Da
DateYourWeight

Jetzt habe ich aber doch noch eine Frage...

Wie muss ich den Text umschreiben, damit ich folgenden Effekt erziele:
Das kleine Bild wird zuerst angezeigt, beim Drüberfahren mit der Maus passiert nichts und mit einem Klick (linke Maustaste) öffnet sich keine andere Seite, sondern erst dann wird das große Bild angezeigt.

Immer diese Extra wünsche...

Danke euch! :)


 Antworten

 Beitrag melden
#8
22.12.2017 08:24
avatar  TiJo
#8
Ti
TiJo

Versuch mal, dass du den Link vom kleinen Bild zu leer lässt. Außerdem könntest du versuchen aus dem onmouseover ein onclick event zu machen.


 Antworten

 Beitrag melden
#9
23.12.2017 00:23 (zuletzt bearbeitet: 24.12.2017 16:15)
avatar  DateYourWeight
#9
Da
DateYourWeight

Oh wei, du hast es hier mit einem sehr großen Anfänger zu tun, was HTML, CSS ... betrifft (obgleich ich es aber immer interessanter finde!).

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<table width="100%">
    <tr>
        <td align="center" valign="center">
            <div class="zoomimage-container">
                <a class="zoomimage-std" href=""><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> <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>
            </div>
        </td>
    </tr>
</table>
 



So sieht es jetzt aus. Wenn ich mit der Maus drauf fahre, passiert nichts. Wenn ich drauf klicke, dann erscheint das größere Bild (juhu!), allerdings springt es unmittelbar danach wieder zurück zum kleinen Bild.

Was muss ich da genau ändern? Ich sehe, ich muss noch viel lernen.. ;)
_____________________________________

Anmerkung:
Das funktioniert schon.

1
2
3
4
5
6
7
 
<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.

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



Ich danke euch wie immer vielmals und liebe Grüße,
Sarah :)


 Antworten

 Beitrag melden
#10
24.12.2017 16:19
avatar  az_
#10
avatar
az_

bitte denkt daran, was auf jedem meiner Beiträge in der Signatur steht, wenn Ihr im Forum CODE postet!
...sonst wir hier alles ganz schnell ganz unübersichtlich!!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#11
29.12.2017 23:14
avatar  DateYourWeight
#11
Da
DateYourWeight

Hallo Az,

entschuldige bitte, das werde ich mir merken.
Habe es gerade in der Vorschau mal ausprobiert und es sieht wirklich übersichtlicher aus.

Gruß Sarah :)

P.S. Kann mir jemand bezüglich meines Anliegens helfen?


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!