Image with Hotspot – Abändern?

Hallo Andy,

vielen Dank. Das Ganze funktioniert eigentlich so weit gut – muss ich halt nur irgendwie noch hinzaubern. Wo du mir eventuell noch helfen kannst ist folgendes:

a) Auf der Startseite sollte das ganze mit dem obigen Code durchgeführt werden (anstatt dem alten “Imagemap-Zeugs”). Unter “Leistungen” aber, sollte die Hotspot default funktionieren. Kann man also die Codes oder Klassen so trennen damit ich jene auf der Startseite anspreche und sonst keinen?

b) Kann man das Rechteck so bilden, damit der Kreis (wo die Nummerierung normal ist) der Mittelpunkt ist und das Reckteck sich somit nach Links und Rechts gleich aufteilt? Hoffe du weißt was ich meine. Aber ist derzeit auf der Webseite ersichtlich.

Oder C) Gibt es eine andere Möglichkeit diese Sachen zu verlinken wie bei einem Imagemap? Bin echt Planlos :(
LG

• This reply was modified 9 years, 9 months ago by Zitronenen.

Schönen Samtag,

a) Wo setzte ich die Seiten ID nun hin beim CSS Code?
.page-id-9 #content {

b) Hoffe mit dieser Paint Skizze lässt sich das erklären was ich meine: https://db.tt/DyzOaPK5
Von mir aus kann der Hotspot Puls komplett weg sein. Und nur der Hotspot dehnt sich über den gesamten Produktrahmen aus.

c) Imagemap: http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
Wie in meinem 1. Beitrag hier, habe ich das schon versucht. Am PC oder Tablet kein Problem, da funktioniert jeweils der Link (das Logo auf der Webseite ganz unten mit den verschiedenen Produkten). Jedoch funktioniert es am Handy nicht, da wir die Imagemap als einziges Bild erkannt. Somit dachte ich, dass ich es mit dem Haus eigenem Image With Hotspot von Enfold schaffe.
Das Imagemap ist derzeit auch auf der Webseite ersichtlich (Startseite neben der News)

• This reply was modified 9 years, 9 months ago by Zitronenen.

EDIT2: – Mein letzter Versuch:
Ich möchte den Hotspot in eine Art Rechteck und transparent zu gestalten. Sprich ein Art versteckter Link (wie beim Imagemap).
Code müsstet dieser sein:

.av-hotspot-blank .av-hotspot-container .av-image-hotspot_inner {
height: 25px;
width: 54px;
top: -2px;
background-color: transparent !important;
}

Jedoch sind dann die Nummerierungen sichtbar – kann ich die Schriftfarbe irgendwie auf Transparent stellen? Im Hotspot an sich habe ich keine Farbe gewählt?

Des Weiteren möchte ich den Puls transparent gestalten:

.page-id-9 .responsive .av-image-hotspot-pulse {
background-color: transparent !important;
}

Leider funktioniert hier die Page Zuordnung nicht. Der Code an sich funktioniert jedoch wenn ich die Page-ID weglasse.

PS: Habe dir einen Account angelegt. Siehe Post 1

• This reply was modified 9 years, 9 months ago by Zitronenen.

Moin Andy!

der Code hat soweit funktioniert. Jedoch sollte noch der Pulse transparent werden.

.page-id-9 .responsive .av-image-hotspot-pulse {
background-color: transparent !important;
}

Funktoniert leider nicht.

Auch wenn ich nur av-image-hotspot-pulse dazu gebe zu deinem Code wird dieser nicht transparent :(.
Aber wir sind kurz vorm Ziel :)

Hallo Andy,

das ist richtig. Der Code oben funktioniert, jedoch aber greift dieser auf allen Seiten, wo der Hotspot ist. Ich möchte diese wiederum nur für page 9 haben.

Derzeit steht folgender Code im CSS:

.page-id-9 .av-hotspot-blank .av-hotspot-container .av-image-hotspot_inner {
background-color: transparent !important;
color: transparent !important;
}

.responsive .av-image-hotspot-pulse {
background-color: transparent !important;
}

Wenn ich aber auch nur für Page9 haben möchte funktioniert dieses nicht mit .page-id-9

Perfekt Andy!
Genau so wollte ich das. Vielen Dank das du so lange das Thema durchgehalten hast :)
Aber ist somit eine Abhilfe wenn jemand noch dieses Imagemap betreiben möchte :)

Für jene, die es noch wissen wollen:

.page-id-9 .av-hotspot-blank .av-hotspot-container .av-image-hotspot_inner {
background-color: transparent !important;
color: transparent !important;
}
.page-id-9 .av-hotspot-container .av-image-hotspot-pulse {
background-color: transparent !important;
}

Danke nochmal. Closed! :)

• This reply was modified 9 years, 9 months ago by Zitronenen.