Django + Javascript + "onmouseover"

Question

This will be sort of general question about django + javascript. For example, I have 5 news, for each there is title, text and image. On web page all of 5 images are visible, but only 1 text and 1 title (for newest news).

Now I want to this: when mouse cursor is put over any of news' image, it title and text will by shown instead of title and text of the newest news. How to do that? I am not looking for complete solution (it would be too beautiful :), but some tips where to look.

I assume that Javascript is required (and web was written in django) but what alse? Anyone can give me some advice, how to links etc? I would be very grateful.

score 0 · Accepted Answer · answered Feb 21 '11 at 13:43

If you generate the other 4 news items in a div or some other element, you can apply a class style to it display: none which will hide that piece of content. Then you can use some jQuery (or plain old javascript if you like) to show that content on mouse over.

Something like this:

$('img').mouseover(function(){
    var item_num = $(this).data('news-item');
    $('hidden' + item_num).show();
});

That assumes you have HTML something like:

<img src='' data-news-item='2'>
<div class='hidden2'> 
    <span id='title2'> Hi There </span> 
    <span id='text2'> ..article.. </span>
</div>

This is a very very basic approach and it can be done much better. But that should get you the jump you need.

Django + Javascript + "onmouseover"

1 Answers1