Hello.

The following problem arose: it is necessary that when you hover the cursor over the picture, it changes to another one. This must be done in a static page on the DLE. Only 2 photos. I read that it is necessary to apply a hover, but something does not work (I can not insert it there, I need to insert it on a specific page). I tried to use "javascript", everything works, but only on the first page, but I cannot understand how to transfer it to a static one. (I wrote the script in head and body, so it works on the first page, and when I tried to insert into the news or static page, nothing happened or nothing was visible at all). It is necessary to insert only one specific page.

Explain, please, if it is possible in great detail what to insert and where. I would be grateful for the help!

  • Is it possible to more adequately formulate a question? - Sergey

8 answers 8

Example with hover:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hover</title> <style> /* картинки в папке в корне сайта nyanyanya.nya/images/nya.ico */ #myimage { /* http://nya.sh/favicon.ico */ background:url(images/nya.ico) no-repeat 0px 0px; width: 16px; height: 16px; } #myimage:hover { /* http://hashcode.ru/upfiles/favicon.ico */ background:url(images/hash.ico) no-repeat 0px 0px; } </style> </head> <body> <img id="myimage" /> </body> </html>

Example with javascript:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript</title> </head> <body> <img id="myimage" src="images/nya.ico" onmouseover="this.src='images/hash.ico';" onmouseout="this.src='images/nya.ico';" /> </body> </html>

    I wrote a java script in the head and in the body, so it works on the first page, and when I tried to insert in the news or in a static page, nothing happened or nothing was visible at all.

    You through the addition of a news / static page script inserted? If so, then DLE cuts out scripts, so nothing worked for you.

    Option 1

    Insert script into static page directly via phpmyadmin

    Option 2

    We insert into the static page itself

     <img id="myimage" src="images/image1.jpg" />

    And in the template main.tpl before the closing element </body> add

     [aviable=static]<script> document.getElementById('myimage').onmouseover = function() { this.src='image2.jpg'; } document.getElementById('myimage').onmouseout = function() { this.src='image1.jpg'; } </script>[/aviable]

      On each static page insert:

       <head> <script type="text/javascript" src="/JS/myscript.js"></script> </head>

      The src value should indicate the path to the folder where the script is located, for example, /JS/myscript.js .

      • Thanks for the answers, but something I can not. Probably not doing it. Who can explain how to do this (explain thoroughly), how to place a changing picture on a certain page (it is necessary on a statistical one) and how much your explanation will cost (only within reasonable limits). - vasya
      • And you can link to your website or at least the code of the page on which you want to insert this changing picture. - Perl
      • fotozov.ru/index.php?do=static&page=uslugi - vasya

      Maybe it will be easier to use jQuery?

        Vasya try this.
        Add to main.tpl after {AJAX} this code

          <script> $(document).ready(function(){ $('.img_replace img:eq(1)').css({display: 'none'}); var img0 = $('.img_replace img:eq(0)').attr('src'); var img1 = $('.img_replace img:eq(1)').attr('src'); $('.img_replace img:eq(0)').hover( function(){$(this).attr({src:img1});}, function(){$(this).attr({src:img0});} ); }); </script>

        And in the static page code, enclose two pictures in the <p class="img_replace">...</p> then the second picture will disappear and when you hover over the first one it will appear in its place.
        Ps. I of course wrote the perverted code)))

        • and by the way this option will work throughout the site and in the news too - AHXAOC

        Rewrote a bit

         <script> $(document).ready(function(){ $('.img_replace img:odd').css({display: 'none'}); var img0; var img1; $('.img_replace img').hover( function(){ img0 = $(this).attr('src'); img1 = $(this).next('img').attr('src'); $(this).attr({src:img1}); }, function(){ $(this).attr({src:img0}); } ); }); </script>

        Well, respectively, the pictures should look like

         <p class="img_replace"> <img src="ppp_image.jpg"/><img src="ppp_image2.jpg"/> </p> ............тут например текст ............. <p class="img_replace"> <img src="lll_image.jpg"/><img src="lll_image2.jpg"/> </p>

        Replacing pictures will work in all places. And no matter how many pairs of pictures it costs

          It is strange that there is no answer with css, probably the question has been asked for too long:

          http://jsfiddle.net/o8yyxqrx/

           .hasImage { background: url('http://placehold.it/320x200&text=1'); width: 320px; height: 200px; } .hasImage:hover { background: url('http://placehold.it/320x200&text=2'); } 
           <div class="hasImage"></div>
            1. Go to the phpMyAdmin panel
            2. On the left in the menu choose dle_static
            3. You will see a list of your pages and click on the pencil, that is, "Edit"
            4. There will be a panel for editing the page code, paste the script there and click OK or save it all.