The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to trigger hover event from another element?
Jayde
post Jul 1 2021, 11:38 PM
Post #1





Group: Members
Posts: 3
Joined: 1-July 21
Member No.: 28,003



Sorry if this is posted in the wrong place. I think it may cover more than one topic.

On my page I have several SVG <path> that draw a little maps. When the user hovers over the maps, the map changes to orange.
However, there are also images placed on top of the paths (they are bubbles showing the name of the map). My problem is when the mouse moves over the little images, I'd like the map behind it to stay lit up as orange. So, I'm guessing I'd need to trigger the path's hover event from the image's hover event, but have not idea how to do that in code.

Here's a picture of the problem.

IPB Image

Thanks in advance for any help.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 2 2021, 03:21 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



How is the color change done, with CSS alone or javascript?

With javascript you could let the mouseover events on the map or little image call the same color-change javascript function for both.

With CSS :hover, you can make the little image a child element of the larger map (if possible with SVG?), but use absolute positioning to place it somewhere else.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jayde
post Jul 3 2021, 12:03 AM
Post #3





Group: Members
Posts: 3
Joined: 1-July 21
Member No.: 28,003



QUOTE(Christian J @ Jul 2 2021, 05:21 PM) *

How is the color change done, with CSS alone or javascript?

With javascript you could let the mouseover events on the map or little image call the same color-change javascript function for both.

With CSS :hover, you can make the little image a child element of the larger map (if possible with SVG?), but use absolute positioning to place it somewhere else.


Thank you for replying Christian!

The color change is done with CSS.
Following your advice I messed around with it and have managed to get things a little better by using IDs and wrapping the little tag image inside an <a> with the SVG <path>. So now the color change fires when I hover over the image, but the image also becomes invisible when not hovered over, inheriting the the behavior from the path. I think I'm close, I just have to work out how to make the image visible when not hovered over.

Here is the relative code:
CODE

<style type="text/css">
    #kamakura-map{fill:#FFB408;opacity:0;}
    #kamakura-map:hover{fill:#FFB408;opacity:1;}
</style>
    
<a id="kamakura-map" xlink:href="https://seaside-living-japan.com/kamakura/" >
    <path d="M633.9,237.3c5.1-10.7,10.1-21,14.9-31.3c0.9-1.9,2-1.2,3.2-0.5c15.6,9.2,32.6,15.8,46.9,27.2
        c2.7,2.1,5.8,3,8.9,1.9c3.6-1.3,4.9,0.3,5.8,3.3c1.7,5.9,4.4,7.6,10.2,5.7c5.4-1.7,10.6-3.9,16-5.7c1.6-0.6,2.5-1.6,2.9-3.1
        c0.5-1.9,0.6-4,1.3-5.8c1-2.8,0.8-6.9,4.5-7.3c3.3-0.4,9.1,5.8,8.4,9.1c-1.7,9,1.8,15.4,8.8,20.5c1.5,1.1,2.8,2.5,3.8,4
        c4.5,7.1,10.9,9.5,19,8.8c5-0.4,10,0.1,15,0.2c1.7,0,3.2,0.1,4.1,2c3,6.3,6.1,12.6,7.1,19.6c1.4,9.6,11,15.5,20.3,12.4
        c1.7-0.6,3.4-1.3,5.1-1.9c5.9-2.2,8-1.6,9.6,4.4c3.2,12.6,6,25.2,8.1,38c0.4,2.3-0.7,3-2.7,3c-6.3,0-10.2,3-11.6,9.3
        c-0.9,4.1-4.8,5.1-8.1,5.6c-9.5,1.5-18.2,6.5-28.1,6.3c-2.6-0.1-4.4,2.1-4.8,4.5c-1,5.1-4.7,7.4-8.9,8.3
        c-8.7,1.9-14.6,7.5-20.2,13.9c-2.2,2.5-4.3,5-7.6,6.6c0.5-4.5-2.3-7-4.8-9.4c-3.8-3.7-7.8-7.3-12.1-10.4c-4.3-3.1-9.7-2.4-14.7-3.1
        c-9.1-1.2-13.8,3.4-16.6,11.7c-1.6,4.5-7.3,4.9-10.8,7.6c-4.4,3.4-8,1.7-11.8-0.9c-1.7-1.2-3.7-1.3-5.8-1.1
        c-6.9,0.7-13.2-1.3-19.7-3.4c-7.2-2.3-14.8-3.9-22.5-4.2c-7.1-0.3-14.3-3.1-21.1,1.6c-1.4,0.9-3.7-0.2-4.8-1.8
        c-1.5-2.1-2.2-4.2-0.9-6.9c3.9-7.9,7.5-15.9,11.4-23.9c2.5-5.1,4.9-10.2,4.6-16.1c-0.3-8.2,5-14.2,7.9-21.2
        c2.7-6.4,6.8-9.7,13.7-9.9c5-0.2,9-2.5,12.3-6.6c3.1-3.9,6.6-7.5,10.2-10.9c2.9-2.8,2.1-5.8,1-8.7c-1.2-3-4-1.6-6.2-1.6
        c-3.2,0-7.3,2.3-9.3-1c-1.7-2.8,2-5.2,3.4-7.7c2.1-3.5,2.1-6.9-0.3-10.3c-2.3-3.2-4.5-5.1-9.1-3.4c-5.6,2-8.1-0.4-7.9-6.5
        c0.2-8.9,0.2-8.9-8.7-10.2C640.5,237.7,637.5,237.6,633.9,237.3z"/>
    <image href="https://seaside-living-japan.com/wp-content/uploads/2021/07/Tag_kamakura.png" x="690" y="315" width="97" height="37">
    </image>
</a>


Any advice would be appreciated. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 3 2021, 05:05 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



I don't really know SVG, so I copied some of the HTML from a simpler example on the web:

CODE
#kamakura-map {
position: relative;
width: 190px; height: 160px;
cursor: pointer;
}

#kamakura-map img {
position: absolute; top: 55px; left: 45px;
opacity: 0;
}

#kamakura-map:hover img {
opacity: 1;
}


<div id="kamakura-map">
<img src="fujisawa.jpg" width="100" height="50" alt="Fujisawa">
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
</div>


I don't know how to change the background of the PATH shape with CSS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 3 2021, 09:55 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Absolutely nothing shows up for me with that code (yes, I added the SVG tags).

BTW IMG doesn't have a href attribute. It's src. And it doesn't have a closing tag. I'm not sure, but i don't think you can put the image inside the SVG like that. Put it after and position it on top of the SVG. I can't try since I can't see the SVG...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jayde
post Jul 3 2021, 05:24 PM
Post #6





Group: Members
Posts: 3
Joined: 1-July 21
Member No.: 28,003



I finally solved it the old school way of imbedding the city tag png into the background image. That way even when their actual <image> elements disappeared with the inherited class :hover behavior, they would still be visible as part of the background. I was reluctant to do it this way at first because I was sure the pixel alignment would mess up, especially when resized, however it turned out to be surprisingly faithful.

Here is the key bits of code for one of the minimap sections:
CODE

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1440 884" style="enable-background:new 0 0 1440 792;" xml:space="preserve">

<style type="text/css">
       .minimap{fill:#FFB408;opacity:0;}
       .minimap:hover{fill:#FFB408;opacity:1;}
</style>
    
<image href="https://seaside-living-japan.com/wp-content/uploads/2021/07/seaside-area-map-1.png" x="0" y="0" width="1440" height="884">
</image> {Background Image}

<a class="minimap" href="https://seaside-living-japan.com/kamakura/" >
    <path d="M633.9,237.3c5.1-10.7,10.1-21,14.9-31.3c0.9-1.9,2-1.2,3.2-0.5c15.6,9.2,32.6,15.8,46.9,27.2
        c2.7,2.1,5.8,3,8.9,1.9c3.6-1.3,4.9,0.3,5.8,3.3c1.7,5.9,4.4,7.6,10.2,5.7c5.4-1.7,10.6-3.9,16-5.7c1.6-0.6,2.5-1.6,2.9-3.1
        c0.5-1.9,0.6-4,1.3-5.8c1-2.8,0.8-6.9,4.5-7.3c3.3-0.4,9.1,5.8,8.4,9.1c-1.7,9,1.8,15.4,8.8,20.5c1.5,1.1,2.8,2.5,3.8,4
        c4.5,7.1,10.9,9.5,19,8.8c5-0.4,10,0.1,15,0.2c1.7,0,3.2,0.1,4.1,2c3,6.3,6.1,12.6,7.1,19.6c1.4,9.6,11,15.5,20.3,12.4
        c1.7-0.6,3.4-1.3,5.1-1.9c5.9-2.2,8-1.6,9.6,4.4c3.2,12.6,6,25.2,8.1,38c0.4,2.3-0.7,3-2.7,3c-6.3,0-10.2,3-11.6,9.3
        c-0.9,4.1-4.8,5.1-8.1,5.6c-9.5,1.5-18.2,6.5-28.1,6.3c-2.6-0.1-4.4,2.1-4.8,4.5c-1,5.1-4.7,7.4-8.9,8.3
        c-8.7,1.9-14.6,7.5-20.2,13.9c-2.2,2.5-4.3,5-7.6,6.6c0.5-4.5-2.3-7-4.8-9.4c-3.8-3.7-7.8-7.3-12.1-10.4c-4.3-3.1-9.7-2.4-14.7-3.1
        c-9.1-1.2-13.8,3.4-16.6,11.7c-1.6,4.5-7.3,4.9-10.8,7.6c-4.4,3.4-8,1.7-11.8-0.9c-1.7-1.2-3.7-1.3-5.8-1.1
        c-6.9,0.7-13.2-1.3-19.7-3.4c-7.2-2.3-14.8-3.9-22.5-4.2c-7.1-0.3-14.3-3.1-21.1,1.6c-1.4,0.9-3.7-0.2-4.8-1.8
        c-1.5-2.1-2.2-4.2-0.9-6.9c3.9-7.9,7.5-15.9,11.4-23.9c2.5-5.1,4.9-10.2,4.6-16.1c-0.3-8.2,5-14.2,7.9-21.2
        c2.7-6.4,6.8-9.7,13.7-9.9c5-0.2,9-2.5,12.3-6.6c3.1-3.9,6.6-7.5,10.2-10.9c2.9-2.8,2.1-5.8,1-8.7c-1.2-3-4-1.6-6.2-1.6
        c-3.2,0-7.3,2.3-9.3-1c-1.7-2.8,2-5.2,3.4-7.7c2.1-3.5,2.1-6.9-0.3-10.3c-2.3-3.2-4.5-5.1-9.1-3.4c-5.6,2-8.1-0.4-7.9-6.5
        c0.2-8.9,0.2-8.9-8.7-10.2C640.5,237.7,637.5,237.6,633.9,237.3z"/>
    <image href="https://seaside-living-japan.com/wp-content/uploads/2021/07/Tag_kamakura.png" x="691" y="316" width="102" height="37">
    </image>
</a>

</svg>


This post has been edited by Jayde: Jul 3 2021, 05:25 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 10:28 AM