Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Смена картинок при наведении курсором

Автор: edR0s 5.8.2012, 03:51

Всем привет. Я осваиваю javascript второй день и совсем плохо в нем разбираюсь.

Задача.
Имеется:
Блок А - в нем картинка А1
Блок Б - в нем картинка Б1
Блок В - в нем картинка В1

Надо сделать так, чтобы:
при наведении курсором на блок А,в блоке А картинка А1 менялась на картинку А2, а в блоке В появлялась картинка А3;
при наведении на блок Б, в блоке Б картинка Б1 менялась на картинку Б2, а в блоке В появлялась картинка Б3.

Код


<div id="blok A"><img src="kartinkaA1.png" border="0"/>
<a href="blokA.html" onmouseover="imgOn('img1')"; onmouseout="imgOff('img1')" ><img src="kartinkaA1.png" border="0" name=img1 " /></a></div>

<div id="blok B"><img src="kartinkaB1.png" border="0"/>
<a href="blokB.html" onmouseover="imgOn('img2')"; onmouseout="imgOff('img2')" ><img src="kartinkaB1.png" border="0" name=img2 " /></a></div>

<div id="blok V"><img src="kartinkaV1.gif" border="0" ) /></div>

Код


if (document.images) {
img1on = new Image();    
img1on.src ="kartinkaA2.png"; 
img1off = new Image();    
img1off.src = "kartinkaA1.png"

img2on = new Image();    
img2on.src ="kartinkaB2.png"; 
img2off = new Image();    
img2off.src = "kartinkaB1.png"
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src"); }}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src"); }}

Собственно картинки А1 и Б1 меняются на картинки А2 и Б2, но надо чтобы еще в блоке В появлялись картинки А3 и Б3. Помогите пожалуйста, буду очень благодарен..

Автор: mullih 5.8.2012, 15:44

Код


<html>
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
            if (document.images) {
                var images = {
                    img1: 'http://www.google.com/logos/2012/jaakonpaiva-12-hp.jpg', 
                    img1on: 'http://www.google.com/logos/2012/olympics-rings-2012-hp.jpg', 

                    img2: 'http://www.google.com/logos/2012/peru-2012-hp.jpg', 
                    img2on: 'http://www.google.com/logos/2012/field_hockey-2012-hp.jpg', 

                    img3: 'http://www.google.com/logos/2012/opening_ceremony-2012-hp.jpg', 
                    img1add: 'http://www.google.com/logos/2012/belgium-12-hp.jpg',
                    img2add: 'http://www.google.com/logos/2012/earhart12-hp.jpg',
                };

            }
            function imgOn(imgName) {
                if (document.images) {
                    document[imgName].src = images[imgName + 'on'];
                    document['img3'].src = images[imgName + 'add'];
                } 
            }
            function imgOff(imgName) {
                if (document.images) {
                    document[imgName].src = images[imgName];
                    document['img3'].src = images['img3'];
                } 
            }
    </script>
</head>
<body>
    <img src="http://www.google.com/logos/2012/jaakonpaiva-12-hp.jpg" name="img1" onmouseover="imgOn('img1')"
        onmouseout="imgOff('img1')" />
    <img src="http://www.google.com/logos/2012/peru-2012-hp.jpg" name="img2" onmouseover="imgOn('img2')"
        onmouseout="imgOff('img2')" />
    <img src="http://www.google.com/logos/2012/opening_ceremony-2012-hp.jpg" name="img3" border="0" />
</body>
</html>

Возможно вам поможет прочитать http://smarly.net/pro-jquery-osnovi-java-script

Автор: Cheloveck 5.8.2012, 16:04

Код


<html>
  <head>
    <title>Test</title>
    <style type="text/css">
        .block-wrapper {
            display: block;
            border: 2px solid black;
        }
        .block {
            display: block;
            border: 3px solid red;
        }
    </style>
  </head>
  <body>
    <div class="block-wrapper">
        <p>Block A</p>
        <div class="block" id="block-a">
            <img id="img-a" src="a1.png" />
        </div>
    </div>
    <br />
    <div class="block-wrapper">
        <p>Block B</p>
        <div class="block" id="block-b">
            <img id="img-b" src="b1.png" />
        </div>
    </div>
    <br />
    <div class="block-wrapper">
        <p>Block C</p>
        <div class="block" id="block-c">
            <img id="img-c" src="c1.png" />
        </div>
    </div>
    
    <script type="text/javascript">
        var blockA = document.getElementById("block-a");
        var blockB = document.getElementById("block-b");
        
        blockA.addEventListener("mouseover", function() {
            document.getElementById("img-a").src = "a2.png";
            document.getElementById("img-b").src = "a3.png";
        });
        blockA.addEventListener("mouseout", function() {
            document.getElementById("img-a").src = "a1.png";
            document.getElementById("img-b").src = "b1.png";
        });
        blockB.addEventListener("mouseover", function() {
            document.getElementById("img-b").src = "b2.png";
            document.getElementById("img-c").src = "b3.png";
        });
        blockB.addEventListener("mouseout", function() {
            document.getElementById("img-b").src = "b1.png";
            document.getElementById("img-c").src = "c1.png";
        });
    </script>
  </body>
</html>

Автор: edR0s 6.8.2012, 02:41

Спасибо за помощь. Я нашел решение проблемы smile

Код


<div id="blokA"><a href="index.html" onmouseover="imgOn('img1')"; onmouseout="imgOff('img1')"><img src="kartinkaA1.png" onmouseover="kartinkavblokV(id)" id="A3" name=img1 /></a></div>
<div id="blokB"><a href="index2.html" onmouseover="imgOn('img2')"; onmouseout="imgOff('img2')" ><img src="kartinkaB1.png" onmouseover="kartinkavblokV(id)" id="B3" name=img2 /></a>
</div>
<div id="blokV"><img name="blokV" src="kartinkaV1.png">
</div>

Код


if (document.images) { 
img1on = new Image();   
img1on.src ="kartinkaA2.png"; 
img1off = new Image();  
img1off.src = "kartinkaA1.png";
 
img2on = new Image();   
img2on.src ="kartinkaB2.png"; 
img2off = new Image();  
img2off.src = "kartinkaB1.png";
 
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src"); }}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src"); }}
 
function kartinkavblokV(n) {
   if (document.blokV.src) {
      document.blokV.src = "kartinka" + n + ".png"};
}}