изменить изображение использовать JavaScript DOM - PullRequest
Новая
       9

изменить изображение использовать JavaScript DOM

0 голосов
/ 18 марта 2010 
<html>
<head>
<script type="text/javascript">
var curimage = "cottage_small.jpg";   
var curtext = "View large image"; 
function changeSrc() { 
    if (curtext == "View large image"||curimage == "cottage_small.jpg") { 
        document.getElementById("boldStuff").innerHTML = "View small image"; 
        curtext="View small image"; 
        document.getElementById("myImage")= "cottage_large.jpg"; 
        curimage = "cottage_large.jpg";
    } else { 
        document.getElementById("boldStuff").innerHTML = "View large image"; 
        curtext = "View large image"; 
        document.getElementById("myImage")= "cottage_small.jpg"; 
        curimage = "cottage_small.jpg"; 
    } 
} 
</script> 
</head>
<body> 
    <!-- Your page here --> 
    <h1> Pink Knoll Properties</h1>
    <h2> Single Family Homes</h2> 
    <p>
        Cottage:<strong>$149,000</strong><br/>
        2 bed, 1 bath, 1,189 square feet, 1.11 acres <br/><br/> 
        <a href="#" onclick="changeSrc()"><b id="boldStuff" />View large image</a>
    </p>  
    <p><img id="myImage" src="cottage_small.jpg" alt="Photo of a cottage"  /></p> 
</body>
</html>

Это моя кодировка. Мне нужно изменить изображение и текст одновременно, когда я нажимаю на нее.

Я использую LTS, он показывает строку document.getElementById("myImage")= "cottage_large.jpg";

- неверное количество аргументов или неверное присвоение свойства.

Доза кому-то может помочь?

Бьянка

Ответы [ 4 ]

2 голосов
/ 18 марта 2010

Вам необходимо выполнить следующие шаги

  1. Изменить document.getElementById ("myImage") на document.getElementById ("myImage"). Src
  2. Изменить Просмотреть большое изображение на Просмотреть большое изображение

Это решит проблему

1 голос
/ 18 марта 2010

Вы должны изменить: - 

<b id="boldStuff" />View large image

к следующему: - 

<b id="boldStuff">View large image</b>

Похоже, что getElementById не работает для пустых тегов, если вы не используете конечный тег.

Полный правильный источник: - 

<html> 
<head> 
<script type="text/javascript"> 
var curimage = "cottage_small.jpg";    
var curtext = "View large image";  
function changeSrc() {  
    if (curtext == "View large image"||curimage == "cottage_small.jpg") {  
        document.getElementById("boldStuff").innerHTML = "View small image";  
        curtext="View small image";  
        document.getElementById("myImage").src= "cottage_large.jpg";  
        curimage = "cottage_large.jpg"; 
    } else {  
        document.getElementById("boldStuff").innerHTML = "View large image";  
        curtext = "View large image";  
        document.getElementById("myImage").src= "cottage_small.jpg";  
        curimage = "cottage_small.jpg";  
    }  
}  
</script>  
</head> 
<body>  
    <!-- Your page here -->  
    <h1> Pink Knoll Properties</h1> 
    <h2> Single Family Homes</h2>  
    <p> 
        Cottage:<strong>$149,000</strong><br/> 
        2 bed, 1 bath, 1,189 square feet, 1.11 acres <br/><br/>  
        <a href="#" onclick="changeSrc()"><b id="boldStuff">View large image</b></a> 
    </p>   
    <p><img id="myImage" src="cottage_small.jpg" alt="Photo of a cottage"  /></p>  
</body> 
</html>
1 голос
/ 18 марта 2010

Вам нужно изменить изображение источник . 

document.getElementById("myImage").src = "cottage_large.jpg";
0 голосов
/ 18 марта 2010

KooiInc правильно. но есть одна проблема с этим утверждением.


IE6 не будет учитывать document.getElementById ("myImage"). Src .


, поэтому я предлагаю использовать вместо этого jquery.


$ ('# myImage'). Attr ("src", "новый исходный путь");

Обновление

@ CMS: Пожалуйста, проверьте, что я пытаюсь сказать.

ну, я полагаю, здесь есть ужасное недоразумение. Насколько я знаю, IE6 никогда не учитывает изменение источника изображения напрямую, используя метод ". src =" . Я всегда использовал следующую технику для достижения этого, если я не могу использовать jquery. 

document.getElementById('ImageId').style.cssText="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='newPath');";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...