Gruppenfoto beschriften

Antworten
#1
16.03.2019 20:25
avatar  Kersten
#1
Ke
Kersten

Hallo ihr Lieben,

falls es diese Frage schon mal gab, seid so lieb und verlinkt es mir bitte. Ich habe gesucht, aber nichts gefunden. Allerdings mache ich schon den ganzen Tag an diesem Problem rum und habe jetzt nur noch Brei im Hirn... Folgendes: Wenn ich Gruppenfotos habe, fänd ich es toll wenn beim Hovern über die Personen (in meinem Test Hunde) die Namen eingeblendet werden. Ich habe wie gesagt schon eine Menge herumprobiert, bin aber nun mit meinem laienhaften Latein am Ende.

Das ist mein Code, der unter Codepen.io einwandfrei funktioniert. Aber nicht in Jimdo. Da sehe ich nicht mal das Foto, sondern nur meinen Alt-Text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

<div id="Gruppenfoto" class"BoBo">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 675">
    <alt>Gruppenfoto des C-Wurfs vom Bonner Bogen am 06.01.2019</alt>
     <path id="Cookie" 
           class="shape" 
           fill="none" 
           stroke="transparent" 
           stroke-width="1" 
           d="M 747.00,425.00 C 747.00,425.00 721.20,406.05 722.50,407.00 723.80,407.95 732.00,391.00 732.00,391.00 732.00,391.00 730.87,370.36 730.87,370.36 730.87,370.36 727.00,353.00 727.00,353.00 727.00,353.00 722.50,331.93 722.50,331.93 722.50,331.93 721.50,298.00 721.50,298.00 721.50,298.00 728.50,267.00 728.50,267.00 728.50,267.00 747.00,260.00 747.00,260.00 747.00,260.00 766.50,260.00 766.50,260.00 766.50,260.00 783.50,264.50 783.50,264.50 783.50,264.50 809.50,280.00 809.50,280.00 809.50,280.00 809.50,297.50 809.50,297.50 809.50,297.50 814.50,316.50 814.50,316.50 814.50,316.50 822.50,334.00 822.50,334.00 822.50,334.00 822.50,352.50 822.50,352.50 822.50,352.50 817.00,362.50 817.00,362.50 817.00,362.50 811.00,381.00 811.00,381.00 811.00,381.00 811.00,396.50 811.00,396.50 811.00,396.50 818.50,407.00 818.50,407.00 818.50,407.00 813.00,417.00 813.00,417.00 813.00,417.00 782.00,425.00 782.00,425.00 782.00,425.00 747.00,425.00 747.00,425.00">
    </path>
    <text x="670" y="70">Cookie - Welpe 5</text>
  </svg>
</div>
 
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<style>
/*       Gruppenfotos beschriften      */
/*_____________________________________*/
/* <![CDATA[ */
 

#Gruppenfoto path {
  fill: none;
  pointer-events: all;
}
 
#Gruppenfoto text {
  opacity: 0;
  transition: .3s;
  font-size: 24px;
}
 
#Gruppenfoto path:hover
 {
  cursor: pointer;
}
 
#Gruppenfoto path:hover + text
{
  opacity: 1;
}
 
@media all and (max-width: 500px) {
  #Gruppenfoto text {
        font-size: 28px;
  }
}
#Gruppenfoto { 
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}
 
#Gruppenfoto svg {
        background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=871x10000:format=jpg/path/s57fec69c5512d8fc/image/i7a38a3fd09bcf055/version/1552757224/image.jpg');
  background-size: cover;
}
 
@media all and (min-width: 750px) {
        #Gruppenfoto svg {
                background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=871x10000:format=jpg/path/s57fec69c5512d8fc/image/i7a38a3fd09bcf055/version/1552757224/image.jpg');
        }
}
/*]]>*/
</style>
 
 



Kann mir bitte jemand sagen, wo mein Fehler liegt? Das ganze Desaster findet ihr hier: https://www.palaneris.de/zucht/kabous-nachkommen/test/

GLG Grüße für ein schönes WE!
Kersten

PS: Bisher funktioniert es (bei Codepen) nur für den 2 Hund von rechts. Habe bisher nur den einen Pfad angelegt.


 Antworten

 Beitrag melden
#2
17.03.2019 03:14
avatar  az_
#2
avatar
az_

...allein schon das [quote="xmlns="http://www.w3.org/[/quote] kann nicht funktionieren, muss https sein. Versuch mal https://redesign-berlin-seminar.jimdo.co...ider/imagemaps/

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
#3
17.03.2019 14:32
avatar  Kersten
#3
Ke
Kersten

Danke, az.

Mit der www.image-map.net hatte ich vorher auch schon mal herumprobiert. Das klappt grundsätzlich auch ganz gut, aber ich möchte ja nicht verlinken. Ich möchte einfach nur, dass eine Beschreibung auftaucht, wenn ich über eine markierte Stelle des Bildes hovere. Jetzt habe ich 2 Sachen zusammen gewürfelt: Deinen Tipp und Teile dieses Codes. Das klappt insofern, als dass unter dem Foto nun eine Beschreibung auftaucht. Aber die kann ich in keinster Weise stylen...

Woran liegt das? Widersprechen sich da irgendwelche Codes? Wie schon mehrfach erwähnt, bin ich mit JS noch blutiger Anfänger, so dass ich da immer Snippets kopiere, was ändere & schaue wie sich das auswirkt. So habe ich die Beschreibung hinbekommen. Aber mit der Formatierung (style) komme ich nicht klar.

Hat da noch mal jemand einen Tipp? Das Bild liegt hier. Wenn ihr über den linken Hund hovert, seht ihr unter dem Bild die Beschreibung.

GLG Kersten.

Head:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<style>
/* <![CDATA[ */
/*       Gruppenfotos beschriften      */
/*_____________________________________*/
 
./*ImageMap Inner-Container*/
        .imgage-map {
                width: 100%;
 
        }   
        /* CSS für rwdImageMaps (responsive)*/
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }     
/*]]>*/
</style>
 



Widget:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<center>
    <div id="wrap" class="imgage-map">
        <!-- Image Map Generated by http://www.image-map.net/ -->
        <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=871x10000:format=jpg/path/s57fec69c5512d8fc/image/i7a38a3fd09bcf055/version/1552757224/image.jpg" usemap="#image-map" />
        <map name="image-map" id="image-map">
            <area id="Murmel" class="ruede" alt="Murmel - Welpe 7" coords="171,199,174,234,148,274,169,296,244,297,235,252,226,204,199,195" shape="poly" />
        </map>
    </div>
</center>
<script type="text/javascript">
     $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
     });
</script>
 

 
<script>
let person_data = {
	"Murmel":{
		"name":"Murmel",
		"sex": "Rüde",
		"position":"Welpe 7",
		/*"avatar_url":"Welpenfoto"*/
	},
	
}
 
$("area").hover(function(){
	var id = $(this).attr("id");
	var name = $(this).attr("id");
	var pane = createPane(id,name);
	$("#wrap").append(pane);
}, function() {
	$("#pane-"+$(this).attr("id")).remove();
});
 

function createPane(id, name) {
	let data = person_data[name];
	
	var pane = $("<div/>").attr("id", "pane-"+id)
							.addClass("pane")
							
	var avatar = $("<div/>").addClass("pane-avatar")
							.appendTo(pane);
	var img = $("<img/>").attr("src",data.avatar_url)
							.appendTo(avatar);
	
	var info = $("<div/>").addClass("pane-info")
							.appendTo(pane);
	var name = $("<div/>").addClass("pane-name")
							.text(data.name)
							.appendTo(info);
	var sex = $("<div/>").addClass("pane-sex")
								.text(data.sex)
								.appendTo(info);
	var position = $("<div/>").addClass("pane-position")
								.text(data.position)
								.appendTo(info);
	
		return pane;
}
</script>
 

 
<style>
     .pane {
        background: #fcf2d2;
        opacity: 0.8;
        }
    
    .pane-info {
        padding: 1em;
        
    }
    
    .pane-name {
        text-transform: uppercase;
        font-weight: 900;
        font-size: 1.25em;
        color: #704919;
        
    }
    
    .pane-sex {
        color: #d1882e;
    }
    
    .pane-position {
        color: #5c3e38;
    }
 </style>
 


 Antworten

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