The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image Hotspots & Highlighted Text
Drew F
post Dec 28 2013, 07:25 PM
Post #1





Group: Members
Posts: 1
Joined: 28-December 13
Member No.: 20,159



Is there an easy way to link image hotspots to text highlights?
The LA Times did what I would love to do on the image on page
http://www.latimes.com/food/la-fo-pastry-c...72590.htmlstory
at the image just below the text "20 components." (Use find to search for "20 comp")
When you mouse-over the picture, the name of that feature lights up.
When you mouse-over the text, that feature in the picture lights up!

The code is pretty intricate. What tools would I need to create such a graphic/text interface?

Here's a sample of their code:


<style type="text/css" media="screen">

.foodShape {
fill: rgba(0,0,0,.001);
stroke-width: 2;
stroke:#ee4d88;
}

.foodText {
fill: white
;

}

.foodTextStatic{fill: #a65371; }

.ingredients{opacity:0 !important;pointer-events: all;}
.ingredients:hover {opacity:1 !important; -webkit-transition: all 350ms;}

.st4{fill:none;}


</style>

<div id="svgGraphic" style="font-family:Arial; height:565px;">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%"
height="100%" viewBox="0 0 980 546" preserveAspectRatio="xMinYMin meet" style="enable-background:new 0 0 980 546;" xml:space="preserve" >
<g class="st1">
<defs>
<rect id="SVGID_1_" x="0" y="0" width="980" height="546"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g transform="matrix(1 0 0 1 -7.629395e-06 0)" style="clip-path:url(#SVGID_2_);">

<image style="overflow:visible;" width="980" height="546" id="IJ5AbT_2_" xlink:href="http://latdevelopers.com/graphics/beetDessert/dessertImage.jpg" transform="matrix(1 0 0 1 0 0)">
</image>
</g>
</g>

<g>
<rect x="711.732" y="502.454" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 513.3323)" class="foodTextStatic">White chocolate pearls</text>

<rect x="711.732" y="483.543" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 494.4214)" class="foodTextStatic">Salt-preserved cherry blossoms</text>

<rect x="711.732" y="464.633" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 475.5103)" class="foodTextStatic">Amaranth flowers</text>

<rect x="711.732" y="445.722" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 456.6001)" class="foodTextStatic">Red shiso</text>

<rect x="711.732" y="426.811" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 437.6892)" class="foodTextStatic">Violet star flowers</text>

<rect x="711.732" y="407.901" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 418.7784)" class="foodTextStatic">Red star flowers</text>

<rect x="711.732" y="388.99" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 399.8683)" class="foodTextStatic">White star flowers</text>

<rect x="711.732" y="370.08" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 380.9576)" class="foodTextStatic">White pomegranate seeds </text>

<rect x="711.732" y="351.169" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 362.0468)" class="foodTextStatic">Red pomegranate seeds</text>

<rect x="711.732" y="332.258" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 343.1358)" class="foodTextStatic">Vanilla meringue powder</text>

<rect x="711.732" y="313.348" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 324.2251)" class="foodTextStatic">Crème fraiche sorbet</text>

<rect x="711.732" y="294.437" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 305.3144)" class="foodTextStatic">Crème fraiche mousse</text>

<rect x="711.732" y="275.526" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 286.4048)" class="foodTextStatic">Poached rhubarb</text>

<rect x="711.732" y="256.616" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 267.4933)" class="foodTextStatic">Frozen raspberry pieces</text>

<rect x="711.732" y="237.705" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 248.5826)" class="foodTextStatic">Pomegranate tapioca pearls</text>

<rect x="711.732" y="218.795" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 229.6725)" class="foodTextStatic">Ume-perrilla sauce</text>

<rect x="711.732" y="199.884" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 210.7619)" class="foodTextStatic">Raspberry-perrilla sauce</text>

<rect x="711.732" y="180.973" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 191.8513)" class="foodTextStatic">Cassis crème</text>

<rect x="711.732" y="162.063" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 172.9406)" class="foodTextStatic">Beet chips</text>

<rect x="711.732" y="143.152" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 154.0299)" class="foodTextStatic">Beet genoise</text>
</g>


<g id="whiteChocolatePearls" class="ingredients">
<g>
<path class="foodShape" d="M649.099,366.586c0,7.289,6.5,13.191,16.25,13.46c9.75,0.269,16.25-8.345,15.5-16.421
c-0.75-8.076-7-15.614-17.75-13.998C652.349,351.241,649.099,361.74,649.099,366.586z"/>
<path class="foodShape" d="M649.099,366.586c0,7.289,6.5,13.191,16.25,13.46c9.75,0.269,16.25-8.345,15.5-16.421
c-0.75-8.076-7-15.614-17.75-13.998C652.349,351.241,649.099,361.74,649.099,366.586z"/>
</g>
<g>
<path class="foodShape" d="M334.05,94.204c0.095-0.303,0.194-0.593,0.299-0.857c0.675-1.697,2.118-4.261,3.769-6.615
c0.572-1.896,0.826-3.783,0.663-5.445c-0.667-6.786-3.432-11.054-11.265-10.93c-5.999,0.095-15.667,6.446-14,15.898
c1.667,9.452,6.326,11.372,13,11.871C329.245,98.329,331.905,96.683,334.05,94.204z"/>
<path class="foodShape" d="M334.05,94.204c0.095-0.303,0.194-0.593,0.299-0.857c0.675-1.697,2.118-4.261,3.769-6.615
c0.572-1.896,0.826-3.783,0.663-5.445c-0.667-6.786-3.432-11.054-11.265-10.93c-5.999,0.095-15.667,6.446-14,15.898
c1.667,9.452,6.326,11.372,13,11.871C329.245,98.329,331.905,96.683,334.05,94.204z"/>
</g>
<g>
<path class="foodShape" d="M291.765,480.402c-5.149,0.444-14.916,2.073-15.916,9.071c-1,6.998-4.5,14.917,1.25,20.806
c5.75,5.889,21.262,8.997,25-1.368c3.738-10.365,3.75-19.32,0-23.396C298.349,481.439,295.708,480.062,291.765,480.402z"/>
<path class="foodShape" d="M291.765,480.402c-5.149,0.444-14.916,2.073-15.916,9.071c-1,6.998-4.5,14.917,1.25,20.806
c5.75,5.889,21.262,8.997,25-1.368c3.738-10.365,3.75-19.32,0-23.396C298.349,481.439,295.708,480.062,291.765,480.402z"/>
</g>
<g>

<g>
<path class="foodShape" d="M25.18,322.314c-0.205,1.235-0.384,2.386-0.498,3.363c-0.667,5.702-1,14.168-1,14.168
s3.875,1.886,5.632,3.793c1.979-2.559,3.399-8.295,1.829-12.691C29.991,327.72,27.705,324.38,25.18,322.314z"/>
<path class="foodShape" d="M10.016,334.489c3.667,2.419,7.167,6.393,7.167,6.393s0.833-14.168,2.833-20.043
c0.055-0.162,0.11-0.329,0.165-0.493c-4.124,0.395-11.021,4.945-14.527,7.542c-1.425,1.056-2.255,2.617-2.741,4.183
C5.06,332.427,7.958,333.132,10.016,334.489z"/>
</g>
</g>
<g>
<rect x="711.732" y="502.454" class="st4" width="257.92" height="17.435"/>
<text transform="matrix(1 0 0 1 711.7314 513.3323)" class="foodText">White chocolate pearls</text>
</g>
</g>
<g id="cherryBlossoms" class="ingredients">
<g>
<path class="foodShape" d="M192.599,60.156c2.125,1.944,3.625,2.462,5,1.296c1.375-1.166,2.5-3.24,3.5-2.333
c1,0.907-2.25,4.276-0.375,4.795c1.875,0.518,2.875,0.648,4.125,0c1.25-0.648,1.5-2.462,1.875-1.296
c0.375,1.166-1.125,4.017,0.75,3.758c1.875-0.259,4.125-3.758,3.875-4.795c-0.25-1.037,1-2.333,1.75,0
c0.75,2.332,0.625,8.293,6.5,13.606c5.875,5.313,4.101,8.736,4.8,9.552c0.7,0.815,0.876,2.274,0.876,2.274
c1.36-1.252,3.54-2.509,6.699-2.236c6,0.518,10.125,0.289,12.5,4.486c2.375,4.196,2.125,8.473,6.125,14.563
c4,6.091,4.75,6.741,7.125,6.48c2.375-0.26,3.75-2.075,4,1.424c0.25,3.499-1.125,4.276-3.375,4.276s-2.25,1.866,0,4.432
c2.25,2.566,3.125,3.214,5.375,4.25c2.25,1.037,4.5,2.073,4.875,3.369c0.375,1.296,1.212,4.545,1.212,4.545l0,0.002l0,0
c2.079,1.627,4.142,3.345,5.876,4.861c1.146-0.174,2.236-0.378,2.911-0.596c2-0.648,9.5-3.628,8.5-8.034s-1.5-14.384-3.125-24.621
c-1.625-10.237-2.375-12.829-4.375-13.995c-2-1.166-4-2.083-4-2.083s-1.25-3.101-3.75-5.692s-0.575-5.443-2.038-6.22
c-1.462-0.777-6.212-0.259-5.962-3.369c0.25-3.11,0.981-4.017-0.01-4.795c-0.99-0.777-4.115-1.882-6.24-2.302c-2.125-0.42-6,0-6,0
s-0.625-6.483-8.5-9.801c-7.875-3.318-8.625-3.447-8.625-3.447s-1.25-3.499-1.75-6.35c-0.5-2.851-1-4.535-1.75-5.831
c-0.75-1.296-2.25-7.516-2.375-8.812c-0.125-1.296,0-2.333-1.5-2.333s-1.625,3.369-1.625,5.702c0,2.333,1.125,4.535,0,4.924
c-1.125,0.389-6,0.389-6.375,1.555c-0.375,1.166,0.875,0.628-1.5,1.156c-2.375,0.528-8,1.047-10.25,2.861
c-2.25,1.814-5.404,5.443-7.452,6.868c-2.048,1.425-3.048,2.489-3.423,3.707c-0.375,1.218-0.5,1.736-2,1.995
C192.974,58.213,190.474,58.213,192.599,60.156z"/>
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: 13th December 2017 - 07:39 PM