javascript - Can I implement hover effect on links inside canvas area? -
i have trouble canvas , looking help.
i've got canvas area cloud of tags. aim switch images inside image tags on hover event.
i'm using jquery tagcanvas.js (some documentation here: http://www.goat1000.com/tagcanvas.php).
<!doctype html> <html> <head> <title>tagcanvas jquery example</title> <link rel='stylesheet' href='css/style.css'> </head> <body> <div id='mycanvascontainer'> <canvas width='1024' height='700' id='mycanvas'></canvas> </div> <div id='tags'> <ul> <li id='lione'><a href='#'><img src='img/lightlogo.png' onmouseover='this.src="img/lightlogohover.png"'></a></li> <li id='litwo'><a href='#'><img src='img/itservices.png'></a></li> <li id='lithree'><a href='#'><img src='img/logo-1c_22-1.png'></a></li> <li id='lifour'><a href='#'><img src='img/b24_logo.png'></a></li> <li id='lifive'><a href='#'><img src='img/eset_logo-1.png'></a></li> <li id='lisix'><a href='#'><img src='img/medoc_2.png'></a></li> <li id='liseven'><a href='#'><img src='img/android_apple_windows.png'></a></li> <li id='lieight'><a href='#'><img src='img/sozdaniye_saytov_icon.png'></a></li> <li id='linine'><a href='#'><img src='img/featured_img_16.png'></a></li> </ul> </div> <script src='https://code.jquery.com/jquery-3.2.1.min.js' integrity='sha256-hwg4gsxgfzhoseeamdoygbf13fyquitwlaqgxvsngt4=' crossorigin='anonymous'></script> <script src='js/jquery.tagcanvas.min.js' type='text/javascript'></script> <script src='js/app.js' type='text/javascript'> $(document).ready(function() { if(!$('#mycanvas').tagcanvas({ minbrightness: 0.5, reverse: true, depth: 0.8, maxspeed: 0.01, wheelzoom: false, imagemode: 'both', textfont: "helvetica, arial, sans-serif", textcolour: '#ff0000', outlinecolour: '#ff00ff', textheight: 20 },'tags')) { // went wrong, hide canvas container $('#mycanvascontainer').hide(); } }); </body> </html>
Comments
Post a Comment