Вставляем этот текст в блокнот, сохраняем как *.html - радуемся результату, ну и потом подгоняем под DLE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Выбор при наведении на картинку by ПафНутиЙ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
$("div[id^=img_]").hover(function(){
$(this).find(".buttons").fadeIn(200);
}, function () {
$(this).find(".buttons").fadeOut(200);
$(this).find(".show_short").fadeOut(100);
})
$("a[id^=short_]").click(function(){
$(this).parent().parent().find(".show_short").fadeIn(100);
})
})
</script>
<style type="text/css">
.img_show {
width: 200px;
height: 200px;
position: relative;
border: solid 1px #ccc;
float: left;
margin: 20px;
}
.img_show img {
z-index: -1;
width: 200px;
}
.show_short {
z-index: 100;
position: absolute;
top: 0;
right: -120px;
width: 100px;
height: 180px;
background: #000000;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
display: none;
}
.buttons {
position: absolute;
bottom: 20px;
right: 20px;
display: none;
}
.buttons a {
display: block;
background: #fff;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="img_1" class="img_show">
<img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
<div id="but_1" class="buttons">
<a href="/full/" id="full_1">полная новость</a>
<a href="#" id="short_1">короткая новость</a>
</div>
<div id="short_story_1" class="show_short">Тут всякий текст, который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<div id="img_2" class="img_show">
<img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
<div id="but_2" class="buttons">
<a href="/full/" id="full_2">полная новость</a>
<a href="#" id="short_2">короткая новость</a>
</div>
<div id="short_story_2" class="show_short">Тут всякий текст, который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<div id="img_3" class="img_show">
<img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
<div id="but_3" class="buttons">
<a href="/full/" id="full_3">полная новость</a>
<a href="#" id="short_3">короткая новость</a>
</div>
<div id="short_story_3" class="show_short">Тут всякий текст, который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<br clear="all" />
<p>Специально для <a href="http://dle-faq.ru/" title="dle-faq.ru">dle-faq.ru</a></p>
</body>
</html>
Решение не претендует на суперофигенность, но задачу решает. Дальше допиливайте под конкретику сами, основу я дал.
