Как изменить изображение сайта с помощью JavaScript? - PullRequest
Новая
       7

Как изменить изображение сайта с помощью JavaScript?

0 голосов
/ 27 июля 2011

Я работаю с моим первым скриптом Greasemonkey.

И это для веб-сайта с логотипом, я хочу изменить изображение на изображение, которое я создал, и мне интересно, как мне это сделать?

нравится использовать JavaScript для редактирования текущего HTML-документа и замены изображения.

Спасибо за любую помощь!

Редактировать: Изображение находится внутри тега <img>, изображение, которое я хочу изменить / заменить, находится в этом коде: 

<img class="fb_logo img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo" width="170" height="36">

Вот код JavaScript, который я пробовал и не работал: 

var myImage = document.querySelector('.fb_logo img');
myImage.src = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";

Ответы [ 8 ]

1 голос
/ 27 июля 2011 
var logos = document.getElementsByClassName("fb_logo");

for( var i = 0; i < logos.length; i++ )
{
    // true for all img tags with the fb_logo class name
    if( logos[ i ].tagName == "IMG" )
    {
        logos[ i ].src = "http://www.computerweekly.com/blogs/it-downtime-blog/lolcat-tan.jpg"
    }
}
1 голос
/ 28 июля 2011

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

Обратите внимание, что этот скрипт ищет изображение в двух типах местоположений и при необходимости обрабатывает окружающий HTML и CSS.

Также обратите внимание, что он использует jQuery - находку для написания сценариев GM.
И наконец: обратите внимание, что я избегаю Facebook и знаю только одно местоположение логотипа (плюс то, о котором сообщает OP. Если есть новые / другие местоположения, действуйте с ними аналогичным образом. 

// ==UserScript==
// @name            _Facebook Logo Swap
// @include         http://www.facebook.com/*
// @include         https://www.facebook.com/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

/*--- Found FB logo at:
    "h1#pageLogo a" as a backgound image.

    It's reportedly also at: "img.fb_logo.img"
*/
var desiredImage    = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";

//--- Straight image swap:
$('img.fb_logo').attr ('src', desiredImage);


/*--- Replace the link's -- with the logo as a background -- contents with just a plain image.
    Since this image is transparent, clear the old BG image.
    Also constrain the new img to its container.
*/
$('#pageLogo a').css ('background-image', 'none')
                .append ('<img>').find ('img')  .attr ('src', desiredImage)
                                                .css ( {width: '100%', height: '100%'} );
1 голос
/ 27 июля 2011

Знание того, что вы можете использовать специфичный для браузера javascript, является плюсом.

Использование querySelectorAll. 

var img = document.querySelectorAll('.yourClass')[0];

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

Еще лучше, используйте querySelector

var img = document.querySelector('.yourClass');
0 голосов
/ 21 августа 2011

querySelector:

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

querySelectorAll:

возвращает NodeList, содержащий все совпадающие узлы Element в поддеревьях узла, в порядке документа. Если таких узлов нет, метод должен вернуть пустой NodeList.

Использование: 

var element = baseElement.querySelector(selectors);
var elementList = baseElement.querySelectorAll(selectors);

Образец: 

<html>
<body>
    <img class="fb_logo" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo">
</body>
<script type="text/javascript">
    var myImageList = document.querySelectorAll('.fb_logo');
    myImageList[0].src = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";
</script>
</html>
0 голосов
/ 27 июля 2011

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

<html>
    <body>
        <img class="fb_logo img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo">
    </body>
    <script type="text/javascript">
        var yerImg = document.getElementsByTagName("img");
        yerImg[0].setAttribute("src", "http://goo.gl/JP8bQ");
    </script>
</html>
0 голосов
/ 27 июля 2011

сначала вы должны получить ссылку на ваш элемент img, лучше использовать id вместо класса, поскольку getElementsByClassName не поддерживается в IE до ie9:

с необработанным JavaScript (есть много способов сделать это. Это только один): 

var theImg = document.getElementById('imageId');
theImg.src = 'someNewPath'

с чем-то вроде jQuery (библиотека js) - вы можете легко выбрать по классу или по идентификатору или по тегу и т. Д .: 

$('.yourPicClass').attr('src', 'someNewPath')
0 голосов
/ 27 июля 2011

Вы можете сделать это очень просто с помощью jQuery 

        $('.fb_logo').attr('src','newimage.jpg');
0 голосов
/ 27 июля 2011

найдите тег изображения и замените атрибут src. 

var myImage = document.getElementById(idOfImageYouNeedToChange);
myImage.src = "your_image";

Довольно просто.

...