Mouseover Bildzoom funktioniert nicht

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Mouseover Bildzoom funktioniert nicht

Themen-Einstellungen

Thema drucken

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Mouseover Bildzoom funktioniert nicht datum

21.12.2017 04:12

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

#2 | RE: Mouseover Bildzoom funktioniert nicht datum

21.12.2017 11:42

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

Antworten

#3 | RE: Mouseover Bildzoom funktioniert nicht datum

21.12.2017 22:16 (zuletzt bearbeitet: 24.12.2017 16:17)

DateYourWeight

Informationen anzeigen

Beitr�ge:	9
Registriert seit:	21.12.2017

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

#4 | RE: Mouseover Bildzoom funktioniert nicht datum

21.12.2017 22:30

Warum hast du denn überall doppelte Anführungszeichen?

Antworten

#5 | RE: Mouseover Bildzoom funktioniert nicht datum

22.12.2017 00:14 (zuletzt bearbeitet: 24.12.2017 16:17)

DateYourWeight

Informationen anzeigen

Beitr�ge:	9
Registriert seit:	21.12.2017

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

#6 | RE: Mouseover Bildzoom funktioniert nicht datum

22.12.2017 01:06 (zuletzt bearbeitet: 24.12.2017 16:16)

DateYourWeight

Informationen anzeigen

Beitr�ge:	9
Registriert seit:	21.12.2017

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

#7 | RE: Mouseover Bildzoom funktioniert nicht datum

22.12.2017 01:23

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

#8 | RE: Mouseover Bildzoom funktioniert nicht datum

22.12.2017 08:24

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

#9 | RE: Mouseover Bildzoom funktioniert nicht datum

23.12.2017 00:23 (zuletzt bearbeitet: 24.12.2017 16:15)

DateYourWeight

Informationen anzeigen

Beitr�ge:	9
Registriert seit:	21.12.2017

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

#10 | RE: Mouseover Bildzoom funktioniert nicht datum

24.12.2017 16:19

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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#11 | RE: Mouseover Bildzoom funktioniert nicht datum

29.12.2017 23:14

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

Exit Popup erstellen - wie? � � Bilder einschweben lassen

�hnliche Themen

Antworten

Letzter Beitrag

Detail-Style funktioniert nicht bei Trennstrich in Cairo
Erstellt im Forum Allgemeines von Sab 2 29.04.2020 11:54
az_ • Zugriffe: 784
Datumsanzeige bei Blogposts ausschalten funktioniert nicht
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Ninahier 1 30.10.2019 09:34
az_ • Zugriffe: 648
CSS - Media Query im Head funktioniert nicht
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Rainer 7 10.04.2019 13:52
az_ • Zugriffe: 1025
Mailchimp Pop-Up / Overlay funktioniert nicht
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von ChrisNe 2 07.08.2020 15:51
Beginn • Zugriffe: 908
Mouseover per CSS
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Comanila 2 02.08.2018 10:49
Comanila • Zugriffe: 1399
Widget funktioniert nicht
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Hadern 7 01.12.2017 17:55
az_ • Zugriffe: 2244
Code in Widget/HTML funktioniert nicht
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von dimschu 2 18.06.2017 12:54
dimschu • Zugriffe: 1266

Jimdo macht mich wahnsinig! Drop Menü - Code das 1 Seite nicht angezeigt wird.
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Steven Lenz

05.06.2017 20:26
von

az_ • Zugriffe: 1679

Mouseover klappt nicht
Erstellt im Forum Allgemeines von Handyman282 8 16.05.2017 09:18
az_ • Zugriffe: 1759

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an