Image Rollovers byand <a> events

Question

Я смотрел видео-учебник по версии автора CODE # 2, но вместо этого я немного изменил его на CODE # 1 Так в чем разница между обоими кодами, как выполнять те же самые задачи, любую техническую или хорошую практику здесь?

КОД # 1: Б eventhandlers MouseOver и MouseOutof тега

<a href="http://www.google.com" > 
    <img alt="arrow" name="ArrowImage" 
     onmouseover="document.ArrowImage.src='Images/arrow_on.gif'" 
     onmouseout="document.ArrowImage.src='Images/arrow_off.gif'" 
     src="Images/arrow_off.gif" /> 
</a> 

КОД # 2: Б eventhandlers MouseOver и MouseOut тега

<a href="http://www.google.com" 
    onmouseover="document.arrow.src='images/arrow_on.gif'" 
    onmouseout="document.arrow.src='images/arrow_off.gif'"> 
    <img src="images/arrow_off.gif" width="147" height="82" 
      name="arrow" alt="arrow" /> 
</a> 

Answer 1

В первом примере , события onmouseover и onmouseout связаны с тегом <img> , поэтому их активирует <img>. Во втором примере они связаны с тегом <a>, в котором содержится <img>.

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

Однако, если больше текста было включено в тег <a> и события, связанные только с <img>, эффект опрокидывания не будет возникать, когда мышь над текстом.

Например:

<a href="http://www.google.com" > 
    This is some text explaining the image. If you mouse over it, the rollover won't change. 
    <img alt="arrow" name="ArrowImage" 
     onmouseover="document.ArrowImage.src='Images/arrow_on.gif'" 
     onmouseout="document.ArrowImage.src='Images/arrow_off.gif'" 
     src="Images/arrow_off.gif" /> 
</a> 

<a href="http://www.google.com" 
    onmouseover="document.arrow.src='images/arrow_on.gif'" 
    onmouseout="document.arrow.src='images/arrow_off.gif'"> 
    This is some text explaining the image. If you mouse over it, the rollover WILL change. 
    <img src="images/arrow_off.gif" width="147" height="82" 
      name="arrow" alt="arrow" /> 
</a> 

Answer 2

Если нет никакого форматирования или дополнительного контента внутри <a>, вы можете использовать либо, и это не будет иметь значения.

Если в ссылке есть форматирование или дополнительный контент CSS, граница <a> может отличаться от границы img. В этом случае это зависит от фактического намерения: вы хотите изменить источник изображения только при наведении изображения или при зависании оставшейся части ссылки.

Но так как вы просите хорошая практика: Не рекомендуется использовать встроенный JavaScript, т. Е. Не смешивать HTML и JavaScript. При применении хорошей практики вы, вероятно, поймаете события мыши в отдельном <script> внизу вашего документа HTML или определите стиль, используя псевдокласс класса CSS :hover.

Answer 3

Либо работает отлично. Это вопрос того, что вы хотите сделать.

Если, например, у вас был и текст, вы бы выбрали вариант 2, потому что текст был бы сразу после <img> и до </a>.

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

Answer 4

Было ли видео с 1992 года?

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

a#rollover { 
    background: url("normal.jpg") no-repeat 0 0; 
} 

a#rollover:hover { 
    background: url("rollover.jpg") no-repeat 0 0; 
} 

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

Если вы хотите использовать JavaScript для изменения источника изображения, а) используйте unobtrusive JavaScript и b) используйте jQuery для дополнительной простоты.

Answer 5

Как правило, не рекомендуется использовать «встроенный javascript», как вы здесь делаете. Это делает код очень трудным для чтения и, в конечном счете, менее удобным для обслуживания. Использование ненавязчивого javascript, определенного в отдельном файле javascript, - это путь. Примером этого с помощью jquery будет:

// defined in application.js for example: 

$("img").hover(function onmouseover(){ 
    $(this).attr("src", "Images/arrow_on.gif"); 
}, function onomouseout(){ 
    $(this).attr("src", "Images/arrow_off.gif"); 
}); 

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

Что касается «хороших практик», этот пример действительно плохое использование javascript, другими словами, вы можете выполнить одно и то же, используя CSS Sprites.

Например, CSS:

/* use a more specific selector in your actual code */ 
a { 
    /* on state */ 
    background: url(Images/arrow.gif) no-repeat 0 0; 
} 
a:hover { 
    /* default state */ 
    background: url(Images/arrow.gif) no-repeat -50px 0; 
} 

Answer 6

Во-первых, пролонгировать изображения, как правило, осуществляется с помощью CSS

ответ знакомства devdigital для примера.

Во-вторых, если вы собираетесь использовать JavaScript, как вы имеете в своем коде увидеть пример Майкла

В-третьих, я хотел бы отметить, что «имя» атрибут не является допустимым атрибутом для любого из тех, элементов в HTML5 и вовсе не (Read: HTML4) для элемента img.

Наконец, предпочтительный способ сделать это с с JS будет что-то вроде этого:

HTML:

<a id="rollover" href="link.html"><img id="rolloverimage" src="image.jpg" width="100" height="100" alt="text"/></a> 

JS:

var atag = document.getElementById('rollover'); 

atag.onmouseover = function() { 
    document.getElementById('rolloverimage').src = 'rollover.jpg'; 
} 

atag.onmouseout = function() { 
    document.getElementById('rolloverimage').src = 'image.jpg'; 
}