Форум Сайтостроение Веб-строительство

При наведении на ссылку появляется картина. Как реализовать?

1 23
падаван
На сайте с 05.07.2011
Offline
42
падаван
#21

Flash.UA, еще как есть за что, еще как!... пытаюсь, но со скриптами и jquery только пришлось разбираться, обычно готовых решений мне хватало для каких либо нужд, но тут меню, к которому и цепляю эти всплывающие картинки, расположено справа, поэтому они упирались в "стенку".

Но..на свой стыд, скажу что даже с вашим готовым кодом у меня опять возникла небольшая недоработка, посмею просить у вас совета еще раз...хотя частично я эту проблему разрешил, но при этом код приходится увеличивать в разы, потому что если пунктов несколько, то картинка появляется только над одним, и приходится копировать кусок 

$("#example-target-1").ezpz_tooltip({

    contentId: 'simple-content-1',

    contentPosition: 'topLeft',

    offset: 10,

    showContent: function(content) {

        content.fadeIn('fast');

    },

    hideContent: function(content) {



        // if the showing animation is still running, be sure to stop it

        // and clear the animation queue. otherwise, repeatedly hovering will

        // cause the content to blink.

        content.stop(true, true).fadeOut('slow');

    }

});

и изменять в них "example-target" и "simple-content" на "example-target-1", "simple-content-1", "example-target-2", "simple-content-2" и т.д. не могу понять, как сделать что бы один код был для всех пунктов...

на том блоге вроде об этом говорится, вроде просто, заменить скобки или что то в этом роде, но все что я пытался сделать, давало только ошибку...

Google может частично индексировать 3 главных вывода из Платон Щукин об изменениях
падаван
На сайте с 05.07.2011
Offline
42
падаван
#22

еееее😮 


<head>

  <title></title>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/enriquez/ezpz-tooltip/jquery.ezpz_tooltip.js"></script>

  <script>

  $(document).ready(function(){



    $.fn.ezpz_tooltip.positions.topLeft = function(contentInfo, mouseX, mouseY, offset, targetInfo) {

    contentInfo['top'] = targetInfo['top'] - contentInfo['height'] - offset ;

    contentInfo['left'] = mouseX - contentInfo['width'] - offset;



    return contentInfo;

};



$(".tooltip-target").ezpz_tooltip({



    contentPosition: 'topLeft',

    offset: 10,

    showContent: function(content) {

        content.fadeIn('slow');

    },

    hideContent: function(content) {

        // if the showing animation is still running, be sure to stop it

        // and clear the animation queue. otherwise, repeatedly hovering will

        // cause the content to blink.

        content.stop(true, true).fadeOut('slow');

    }





});

});

</script>

<style>

  .tooltip-content {

    background-color: #FFC848;

    border: 3px solid #AF8A31;

    color: black;

    display: none;

    padding: 10px;

    position: absolute;

    text-align: center;

    width: 250px;

}

</style>

</head>



<body>

<div style="padding-left:300px; padding-top: 100px;">

<div class="tooltip-target" id="example-target-1">First Target</div><br />

<div class="tooltip-target" id="example-target-2">Second Target</div><br />

<div class="tooltip-target" id="example-target-3">Third Target</div>

 </div> 

<div class="tooltip-content" id="example-content-1">Content for first</div>

<div class="tooltip-content" id="example-content-2">Content for second</div>

<div class="tooltip-content" id="example-content-3">Content for third</div>

</body>



</html>

вот и готово. всего то месяц возни🍾...пойду принимать таблетки🤪)))

1 23

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий