Блог

Главная - Вопросы по программированию - Как я могу заменить тег img на встроенную метку onmouseover

Как я могу заменить тег img на встроенную метку onmouseover

#javascript #html

#javascript #HTML

Вопрос:

Я хочу заменить изображение встроенным содержимым при наведении курсора мыши на изображение. Я могу легко заменить изображение на изображение с помощью приведенного ниже кода, но не просто с помощью embed:

 <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="this.src='http://www.jakesonline.org/black.gif'" alt="" />

Код заменяет белое изображение черным изображением, протестируйте его здесь: http://www.jmarshall.com/easy/html/testbed.html

Но как я могу заменить изображение на embed swf, используя тот же метод, что и мой приведенный выше код, просто без какой-либо библиотеки, такой как jquery?

Пример, когда я наведу курсор на это изображение http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif затем он заменяет это изображение на 

 http://bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf - <embed src="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />

Пример (не работает наверняка, просто моя мечта):

 <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover=Replace("<embed src="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />") />

Спасибо!

Ответ №1:

Попробуйте заменить innerHTML родительского DOM:

 <div id="thisOne">
  <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="doit(this.parentNode, '<embed src="http://www.jakesonline.org/black.swf" height="240" width ="360" />');" />
</div>

<script>
function doit(elem, theSrc) {
   elem.innerHTML = theSrc;
}
</script>

Если вы хотите, чтобы он переключался обратно onmouseout , напишите функцию для переключения между s и обратно src , например:

 <div id="thisOne" onmouseover="this.innerHTML='<embed src=amp;quot;http://www.jakesonline.org/black.swfamp;quot; height=amp;quot;240amp;quot; width =amp;quot;360amp;quot; />'" onmouseout="this.innerHTML='<img src=amp;quot;http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gifamp;quot; />'" >
  <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" />
</div>

Комментарии:

1. Дал ему большой палец вверх! У меня закончились идеи после того, как я узнал, что это .swf: P, и это казалось простым для понимания

2. Большое вам спасибо, есть ли у вас другой метод, который работает следующим образом:> «) /> Он заменяет весь тег img этой строкой для встраивания (потому что для встраивания тега иногда требуется атрибут width и height) Спасибо!

3. Я пытался: <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="this.parentNode.innerHTML = '<embed src="bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf"; width="200" height="300" />';" /> Но не работает, кажется, какая-то проблема с моим кодом…

4. Я пытался <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="this.parentNode.innerHTML = '<embed src=http://bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf; width=200 height=200 />'" /> , похоже, работать, но мне нужно удалить двойные кавычки src=, width= и height =, как я могу включить двойные кавычки в свой код, но при этом заставить его работать? Спасибо!

5. см. Редактирование. Вы можете отправить весь тег embed с H amp; W в виде строки.

Ответ №2:

Попробуйте использовать CSS

Смотрите пример (обновление):

 <!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        span.myClass {
            display: inline-block;
            width: 640px; /*Fix width, equals in <object> and <embed>*/
            height: 480px; /*Fix height*/
        }
        span.myClass object,
        span.myClass embed {
           display: none;
        }

        span.myClass:hover object,
        span.myClass:hover embed {
           display: block;
        }

        span.myClass:hover img {
           display: none;
        }
    </style>
    <title>Test</title>
</head>
<body>
    <span class="myClass">
        <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" alt="test...">

        <!--//Embed both Flash content and alternative content using standards compliant markup -->
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480">
            <param name="movie" value="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />
        <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" width="640" height="480">
        <!--<![endif]-->
            <p>Alternative content</p>
        <!--[if !IE]>-->
            </object>
        <!--<![endif]-->
        </object>
    </span>
</body>
</html>