Login | Register | FAQ
Anonymous

Appear picture when link is hovered

+ Post a reply

2 posts Page 1 of 1


Appear picture when link is hovered

by D30 » Thu Feb 28, 2013 6:23 am

Exist 1 table with 2 cell:
1 cell for picture;
2 cell for links;
So if link is hovered will appear some of pic. It is possible?

Image

--
где заказать эвакуатор дешево в Москве и рассчитать стоимость вывоза мусора?

Last edited by D30 on Tue Mar 05, 2013 12:54 pm, edited 1 time in total.

User avatar

D30

  • Posts: 1
  • Joined: Thu Feb 28, 2013 6:16 am

Re: Appear picture when link is hovered

by XainPro » Thu Feb 28, 2013 8:27 am

yes this can be done easily by jquery here is code with example

Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table width="307" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="118"><div id="picDiv">
    </div></td>
    <td width="189">
    <ul>
<li id="milk">Milk</li>
<li id="bread">Bread</li>
</ul>
    </td>
  </tr>
</table>


<script>
$("#milk").hover(
function () {
$("#picDiv").html($("<img src='http://instatuts.com/wp-content/uploads/2009/12/Milk-Carton-Print-Packaging-Tutorial-InstaTuts-final-image.png' width='150' height='150' />"));
});
$("#bread").hover(
function () {
$("#picDiv").html($("<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/250px-FD_1.jpg' width='150' height='150' />"));
});
</script>
</body>
</html>
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1