www.webdeveloper.com
Results 1 to 2 of 2

Thread: Popup Hover Image ALMOST Working, String Issue?

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Popup Hover Image ALMOST Working, String Issue?

    Hopefully this is a newbie mistake -- I've only been at Javascript for a few days.

    I'm trying to make a Magic: The Gathering autocard popup (for example hover over a red link on this site). I want to be able to write <a class='card'>CARDNAME</a> and have an image of CARDNAME hover by the mouse.

    I can get it to work if I explicitly give it the whole string (first example in my code) for the image web address, but when I try to combine strings I get a broken image (second and third examples). Maybe there are some non-displaying characters hiding somewhere?

    autocard.js
    Code:
    function init(){
    	var imgstart = "http://www.wizards.com/global/images/magic/general/";
    	var imgend = ".jpg";
    	var imgwhole = [];
    	var links = document.getElementsByTagName("a");
    	for(var i=0;i<links.length;i++){
    		if(links[i].className == "card"){
    			imgwhole[i] = imgstart + links[i].innerHTML.replace(/ /g,"_") + imgend;
    			links[i].onmouseover = function(){showcard(imgwhole[i]);};
    			links[i].onmouseout = function(){hidecard();};
    }}}
    
    function hidecard(){
    	document.getElementById("popup").innerHTML = '';
    }
    
    function showcard(imagename){
    	document.onmousemove=function(){
    		document.getElementById("popup").style.left = (5+event.clientX) + "px";
    		document.getElementById("popup").style.top = (5+event.clientY) + "px";
    	}
    	document.getElementById("popup").innerHTML = '<img src="' + imagename + '">';
    }
    autocard_driver.html
    Code:
    <html>
    <head>
    <script src="autocard.js" type="text/javascript"></script>
    </head>
    <body onload="init()">
    <div style="position:absolute" id="popup"></div>
    <Center><br><br>
    <a onmouseover="showcard('http://www.wizards.com/global/images/magic/general/counterspell.jpg')" onmouseout="hidecard()">EXPLICIT</a>
    <br><br><br>
    <a class='card'>Grizzly Bears</a><br>
    <a class='card'>Counterspell</a><br>
    </center>
    </body>
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <script src="autocard.js" type="text/javascript"></script>
    </head>
    <body>
    <div style="position:absolute" id="popup"></div>
    <center><br><br>
    <a class='card'>EXPLICIT</a>
    <br><br><br>
    <a class='card'>Grizzly Bears</a><br>
    <a class='card'>Counterspell</a><br>
    </center>
    </body>
    </html>
    javascript

    Code:
    var imgstart="http://www.wizards.com/global/images/magic/general/",imgend=".jpg";
    function doc(id){return document.getElementById(id);}
    function hidecard(){doc('popup').innerHTML = '';}
    
    function showcard(obj){
    var imgname=imgstart+obj.innerHTML.replace(/\s/g,'_')+imgend;
    doc('popup').innerHTML = '<img src="' + imgname + '">';
    document.onmousemove=function(){
    doc('popup').style.left = (5+event.clientX) + 'px';
    doc('popup').style.top = (5+event.clientY) + 'px';
    }
    }
    
    function init(){
    var links = document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
    if(links[i].className == "card"){
    links[i].onmouseover = function(){showcard(this);};
    links[i].onmouseout = function(){hidecard();};
    }
    }
    }
    
    window.onload=init;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles