Изменение изображения JavaScript/HTML по клику

В настоящее время я создаю веб-сайт как часть своего курса по ИТ, и я немного смущен, почему что-то не работает. У меня это получилось, когда пользователь нажимает на заголовок курса, появляется текст с дополнительной информацией, но мне также нужно, чтобы изображение менялось, когда оно нажималось, чтобы было немного легче понять. Вот JavaScript код:Изменение изображения JavaScript/HTML по клику

<script language="javascript"> 
function changeImage() 
{ 
    if (document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg") 
    { 
     document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\openTab.jpg"; 
     } 
     else 
     { 
      document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg"; 
     } 
    } 
    </script>

и соответствующий бит HTML:

<img alt="" src="images/hiddenTab.jpg"style="height:22px; width:22px;" id="imgClickAndChange" onclick="changeImage()"/></p>

Любые идеи относительно того, почему он не работает? Спасибо заранее.

EDIT: Правильно, теперь он работает, за исключением того, что, когда я нажимаю изображение, чтобы свернуть текст, изображение не меняется обратно на hiddenTab.jpg. Любые идеи относительно того, почему это делается?

источник

2014-02-15 James

О, пожалуйста, у вас нет источников изображений с такими путями! Поместите изображение в корень вашего сайта и укажите его там.Я готов поспорить, что это не соответствует условию 'if', а также – tymeJV

вы посмотрели, есть ли в веб-консоли какие-либо ошибки javascript? Кроме того, по какой-либо причине вы не используете веб-сервер для обслуживания страницы? Когда вы открываете и обслуживаете локальный файл, все становится неловко. Попробуйте загрузить xampp, так как я вижу, что вы на окнах – Ryan

Я создаю сайт в Dreamweaver (это то, что нам сказали использовать). На данный момент у меня нет доступа к FTP-серверу, на котором мой сайт хранится, поскольку я не в сети колледжа. – James

Вы используете == (если он равен), а не = (присвоение значения переменной) внутри операторов if и else.

PS: вы должны изменить исходный путь, ваше решение не столь основательное прямо сейчас

источник

2014-02-15 18:35:18 steo

Теперь он работает, за исключением случаев, когда я нажимаю, чтобы свернуть текст, изображение не меняется. Есть идеи? – James

вы использовали «==» вместо «=» первого является логическим условием, а второе фактически устанавливает его

источник

2014-02-15 18:35:56 BruceWayne

В HTML вы используете относительный путь и в абсолютных путях JS.

function changeImage() 
{ 
    if (document.getElementById("imgClickAndChange").src === "images\hiddenTab.jpg") 
    { 
     // here you use "=" and not "==" 
     document.getElementById("imgClickAndChange").src = "images\openTab.jpg"; 
    } 
    else 
    { 
     document.getElementById("imgClickAndChange").src = "images\hiddenTab.jpg"; 
    } 
}

источник

2014-02-15 18:37:45 eledgaar

Обратные косые черты, вероятно, не будут работать так хорошо. Было бы также плохо, если бы кто-нибудь из них начинал с 'a',' f', 'n',' r', 't',' v', 'b',' u', 'x' или' 0 '. – Ryan

Это будет работать только на вашем локальном компьютере, даже если это правильно. Абсолютный путь будет работать только на компьютере, если на этом компьютере есть структура каталогов и файл. Относительный путь будет интерпретироваться веб-сервером соответственно и будет представлен конечному пользователю вместе с документом.

Также, если вы используете полный путь как условие, это не произойдет, и вы перейдете к другому.

При присвоении значения свойства следует использовать = и если сравнить 2 значения вы должны использовать ==

приятнее версия коды будет:

<script language="javascript"> 
function changeImage() 
{ 
if (document.getElementById("imgClickAndChange").src=="images/hiddenTab.jpg") 
    { 
    document.getElementById("imgClickAndChange").src="images/openTab.jpg"; 
    } 
else 
    { 
    document.getElementById("imgClickAndChange").src="images/hiddenTab.jpg"; 
    } 
} 
</script>

источник

2014-02-15 18:43:12

Надеется, что это поможет.

Этот document.getElementById("imgClickAndChange").src возвращает полный путь с вашим доменным именем. Так compairing его с «картинками/openTab.png» никогда не возвращает истинный

.getAttribute("src") возвратных точного значения вашего значения атрибута src

Кроме того, вы используете == при назначении значений. в то время как == используется для сравнения и = используется для назначения.

<script language="javascript"> 
    function changeImage() { 
     if (document.getElementById("imgClickAndChange").getAttribute("src") == "images/hiddenTab.png") { 
      document.getElementById("imgClickAndChange").src = "images/openTab.png"; 
     } 
     else { 
      document.getElementById("imgClickAndChange").src = "images/hiddenTab.png"; 
     } 
    } 
    </script>

источник

2014-02-15 18:54:08

Изменение изображения JavaScript/HTML по клику

ответ

Смежные вопросы