在鼠标悬停时在固定位置显示图像

Question

I'm showing the results of a search and when I hover over an item I want to display an image on the top right corner of the website. This is what I'm currently doing:

$name = '<a>' . $row['name'] . '<div><img src="' . 'http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=' . $row['multiverseid'] . '&type=card" /></div></a>';

That's making the website slow down because all the images are being loaded. I want to load the images only on mouse hover like here.

Answer 1

You can create every specific element on onmouseover event with Javascript when you want to display it. This will only load the image when the element is created. You can choose to delete it afterwards or hide it, and when needed load it again. You can find more about this event and how to use it here.