Image Hotspots & Highlighted Text |
Image Hotspots & Highlighted Text |
Drew F |
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"/> |
Lo-Fi Version | Time is now: 25th April 2024 - 10:24 PM |