Rodjer Posted August 30, 2016 Share Posted August 30, 2016 (edited) Hello guys, I am quit new with CSS and Javascript and I search for a tutorial or template how to create animated descriptions with text Onhover/on mouse over the different regions of the image. It should something like that but of-course made in CSS, HTML or JavascriptP.s. By the way how such descriptions with lines are correctly called in English. Captions? Titles? Links? Edited August 30, 2016 by Rodjer Link to comment Share on other sites More sharing options...
dsonesuk Posted August 30, 2016 Share Posted August 30, 2016 (edited) I imagine you would have to use image map along wih mouseover to bring up text description. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap Edited August 30, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Rodjer Posted August 31, 2016 Author Share Posted August 31, 2016 Thanks pal, but wanted something animated or maybe at least good looking. Maybe you have seen any templates or tutorials with Jquery or animated CSS for that? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2016 Share Posted August 31, 2016 Yes, but first you have to make them appear first, when you hover over specific area of image, the animation can be added later once this is achieved. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2016 Share Posted August 31, 2016 Using w3schools example as rough guide <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> function dothis(elem) { x = document.querySelectorAll('.ImgMapCaption'); for (i = 0; i < x.length; i++) { x[i].style.opacity = 0; } document.getElementById(elem.alt).style.opacity = 1; } function orthis(elem) { document.getElementById(elem.alt).style.opacity = 0; } </script> <style type="text/css"> .ImgMapWrap {display: inline-block; position: relative;} .ImgMapCaption { position: absolute; top: 50%; min-width: 100px; background-color: orange; -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ transition: opacity 1s; opacity: 0;} #Sun {left: 10%;} #Venus {left: 90%;} #Mercury {left: 50%;} </style> </head> <body> <div class="ImgMapWrap"> <img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" onmouseover="dothis(this)" onmouseout="orthis(this)"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" onmouseover="dothis(this)" onmouseout="orthis(this)"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" onmouseover="dothis(this)" onmouseout="orthis(this)"> </map> <div id="Sun" class="ImgMapCaption">Sun blah blah</div> <div id="Mercury" class="ImgMapCaption">Mercury blah blah</div> <div id="Venus" class="ImgMapCaption">Venus blah blah</div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now