Image replacement help – Userscripts.org <link rel="shortcut icon" href="/images/script_icon.png" type="image/x-icon" /> <link href="http://static.userscripts.org/stylesheets/display.css?1227340079" media="screen" rel="stylesheet" type="text/css" /> <script src="http://static.userscripts.org/javascripts/prototype.js?1227340079" type="text/javascript"></script> <script src="http://static.userscripts.org/javascripts/effects.js?1227340079" type="text/javascript"></script> <script src="http://static.userscripts.org/javascripts/lowpro.js?1227340079" type="text/javascript"></script> <script src="http://static.userscripts.org/javascripts/application.js?1227340079" type="text/javascript"></script> <link href="/topics/1276.rss" rel="alternate" title="Subscribe to 'Image replacement help'" type="application/rss+xml" /> </head> <body> <div id="header"> <ul id="mainmenu"> <li><a href="/articles" rel="nofollow">Blog</a></li> <li><a href="/scripts" rel="nofollow">Scripts</a></li> <li><a href="/forums" rel="nofollow">Forums</a></li> <li><a href="/users" rel="nofollow">People</a></li> <li><a href="/signup" rel="nofollow">Signup</a></li> <li><a href="/login" rel="nofollow">Login</a></li> </ul> <h1><a href="/" title="Userscripts.org"><img alt="Userscripts.org" src="http://static.userscripts.org/images/userscripts.org.png?1227340079" /></a></h1> </div> <div id="container"> <div id="content"> <div class="crumbs"> <a href="/forums">Forums</a> <span class="arrow">→</span> <a href="/forums/1">Script development</a> <span class="arrow">→</span> </div> <h1 id="topic-title"> Image replacement help </h1> <p class="subtitle"> <a href="/topics/1276.rss"><img alt="Subscribe to Image replacement help" height="14" src="http://static.userscripts.org/images/feed-icon.png?1227340079" width="14" /></a> 9 posts, 3 voices </p> <a name="posts-4852" id="posts-4852"> </a> <table border="0" cellspacing="0" cellpadding="0" class="posts wide"> <tr class="post hentry " id="4852-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4852" rel="bookmark"> <abbr class="updated" title="2007-11-08T16:21:08-06:00"> Nov 8, 2007 4:21pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/23523" class="admin" rel="nofollow">Sean Watson</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4852">  <p>Could someone please tell me how I can replace the "Google Labs Suggest" image on <a href="http://www.google.com/search?hl=en&q=test&btnG=Google+Search&safe=off&complete=1">http://www.google.com/search?hl=.....&complete=1</a></p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4853" id="posts-4853"> </a> </td> </tr> <tr class="post hentry " id="4853-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4853" rel="bookmark"> <abbr class="updated" title="2007-11-08T16:21:39-06:00"> Nov 8, 2007 4:21pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/23523" class="admin" rel="nofollow">Sean Watson</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4853">  <p>I meant replace the image with one of my own</p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4858" id="posts-4858"> </a> </td> </tr> <tr class="post hentry " id="4858-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4858" rel="bookmark"> <abbr class="updated" title="2007-11-08T21:41:23-06:00"> Nov 8, 2007 9:41pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=bb17d724c0274cb5743116895de49a95&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/27110" rel="nofollow">Descriptor</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4858">  <p>Are you not seeing an image tag there? Because on the main Google page they use a background image which can be changed with a style sheet or Stylish, on that page I see regular image tag and I'd assume you would know how to change that? Maybe it's different for you because you are logged in.</p> <p>Or are you asking how to use a <a href="http://diveintogreasemonkey.org/patterns/add-image.html">Data URI</a> ?</p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4896" id="posts-4896"> </a> </td> </tr> <tr class="post hentry " id="4896-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4896" rel="bookmark"> <abbr class="updated" title="2007-11-12T13:28:51-06:00"> Nov 12, 2007 1:28pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/23523" class="admin" rel="nofollow">Sean Watson</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4896">  <p>I realize that it's possible but I'm fairly new to javascript. That's why I need help</p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4897" id="posts-4897"> </a> </td> </tr> <tr class="post hentry " id="4897-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4897" rel="bookmark"> <abbr class="updated" title="2007-11-12T13:32:42-06:00"> Nov 12, 2007 1:32pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/23523" class="admin" rel="nofollow">Sean Watson</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4897">  <p>And I know how to use Data Uri's and I know how to do it with Stylish. More precisely I would like to change image source to one of my.</p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4898" id="posts-4898"> </a> </td> </tr> <tr class="post hentry " id="4898-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4898" rel="bookmark"> <abbr class="updated" title="2007-11-12T14:57:30-06:00"> Nov 12, 2007 2:57pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=0300e643e8d609062ef9fea65e692596&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/22480" rel="nofollow">znerp</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4898">  <p>Wouldn't something along the lines of the following work...<pre>document.images[0].src = "http://whatever/yourImage.jpg";</pre></p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4901" id="posts-4901"> </a> </td> </tr> <tr class="post hentry " id="4901-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4901" rel="bookmark"> <abbr class="updated" title="2007-11-12T19:55:42-06:00"> Nov 12, 2007 7:55pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=bb17d724c0274cb5743116895de49a95&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/27110" rel="nofollow">Descriptor</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4901">  <p>There are a number of ways, the above being the simplist. The most direct way I think is with Xpath. We know the name of the image is "logo_google_suggest_sm.gif" so we can replace that directly...</p><pre> document.evaluate("//img[@src='logo_google_suggest_sm.gif']", document, null, 9, null).singleNodeValue.src = "http://whatever/yourImage.jpg"; </pre><p>However if they change the image name you'll want something more flexible. You could also match <code>[@alt='Go to Google Home']</code> , you just need to find the node and change it's .src property.</p><p>A background image would need to be changed via CSS.</p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4920" id="posts-4920"> </a> </td> </tr> <tr class="post hentry " id="4920-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4920" rel="bookmark"> <abbr class="updated" title="2007-11-13T20:48:37-06:00"> Nov 13, 2007 8:48pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/23523" class="admin" rel="nofollow">Sean Watson</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4920">  <p>I used <br /><code>document.images[0].src = "http://whatever/yourImage.jpg";</code></p> <p>Now how would I go about changing the height and width. I tried using css and it just doesn't seem to wanna work</p> </td> </tr> <tr class="spacer"> <td colspan="2"> <a name="posts-4921" id="posts-4921"> </a> </td> </tr> <tr class="post hentry " id="4921-row"> <td class="author vcard"> <div class="date"> <a href="#posts-4921" rel="bookmark"> <abbr class="updated" title="2007-11-13T20:50:52-06:00"> Nov 13, 2007 8:50pm </abbr> </a> </div> <img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /> <span class="fn"><a href="/users/23523" class="admin" rel="nofollow">Sean Watson</a></span> <span class="role"> Scriptwright </span> </td> <td class="body entry-content" id="post-body-4921">  <p>Nvm I fixed it. I had a typo in the code. Thank you both for your help. I was practically pulling my hair out in frustration.</p> </td> </tr> </table> </div> <div id="right"> <form action="/posts/search" class="search" method="get"><p><label for="q" id="q_label">Search all posts</label><input id="q" name="q" type="text" /></p></form> <h5>Voices</h5> <a href="/users/23523" rel="nofollow" title="Sean Watson"><img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=5cffa8b547f94d99b9a735bc22c8ca10&rating=PG&size=32&default=identicon" width="32" /></a></li> <a href="/users/27110" rel="nofollow" title="Descriptor"><img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=bb17d724c0274cb5743116895de49a95&rating=PG&size=32&default=identicon" width="32" /></a></li> <a href="/users/22480" rel="nofollow" title="znerp"><img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=0300e643e8d609062ef9fea65e692596&rating=PG&size=32&default=identicon" width="32" /></a></li> <h5>Sponsored links</h5> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> <script type="text/javascript"> //<![CDATA[ if ($('q')) { $('q_label').hide(); Event.observe('q', 'focus', function(e) { if (this.value == $('q_label').innerHTML) { this.value = ""; this.style.color = null; } }); function q_show_label(e) { if (this.value == "" || this.value == $('q_label').innerHTML) { this.value = $('q_label').innerHTML; this.style.color = "#888"; } } Event.observe('q', 'blur', q_show_label); q_show_label.call($('q')); // Event.trigger didn't work } //]]> </script> <br style="clear:both;" /> </div> <div id="footer"> <p> <strong class="disclaim">Because it's your web.</strong> <em class="credit">A <a href="http://tr.emendo.us" rel="nofollow">tremendous</a> project with the help from our <a href="/users/contributers" rel="nofollow">friends</a>.</em> </p> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-50927-4"; urchinTracker(); </script> <script type="text/javascript" src="/mint/?js"></script> <script type="text/javascript"> _qoptions={ qacct:"p-6eWjYgYdo7Su6" }; </script> <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <noscript><img src="http://pixel.quantserve.com/pixel/p-6eWjYgYdo7Su6.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/></noscript> <script src="http://userscripts.uservoice.com/widgets/tab.js?alignment=right&color=f18705" type="text/javascript"></script> </body> <script type="text/javascript"></script> </html>