Question

I am using tiny MCE as editor. As you can see in image below from google blogger when ever you mouse over an image it shows up that div below image which is having “Small”,”Medium”,”Large” options .Any advice / samples how will I be able to do with JQuery ?

Answer 1

You can prepare your div with links or any content and set its display css property to ‘none’. Then you control it with jQuery like this.

var yourDiv = $("#ThatDiv");
$("#YourImage").hover(  
  function () {yourDiv.css('display','block');},
  function () {yourDiv.css('display','none');}
});

more on subject here (jQuery api). You might need to tweak the hover out function. (Like adding a timeout so it won’t disappear instantly after mouseout.)

You can propably imagine html code that might look like this:

<img src="#" alt="" id="YourImage"/>
<div id="ThatDiv" style="display:none">
  <a href="">...ETC...
</div>

And you would also use css classes in external stylesheet instead of inline styles. But this is just an quick example.