It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming JavaScript Forum

How do I make this script insert an image instead of text?

How do I make this script insert an image instead of text?

Postby chrisjum on Sun May 18, 2008 9:57 pm

Below you will see a cross-browser page bookmarking script that I am going to use on my site so that I can have a "Bookmark This Page" link for visitors. The script works great in all browsers I've tested so far BUT instead of having it insert the text link that says "Bookmark This Page" I would rather have it insert an image I have on my site. Can anyone tell me what code I have to change in this script to have it insert an image instead of the text link?

By the way my image I want it to insert is located at http://www.jonbarron.org/images/bookmark_page.gif

Code: Select all
/*
*  This script is a cross-browser bookmarking script.  To apply the script copy and paste the following code <div id="addBookmarkContainer"></div>
*  The script will then automatically add the "Bookmark This Page" link inside of that div you made.
*/

//IE5+/Win, Firefox, Netscape 6+, Opera 7+, Safari, Konqueror 3, IE5/Mac, iCab 3

var addBookmarkObj = {
  init:function() {
    if(!document.getElementById || !document.createTextNode) return;
    var cont=document.getElementById('addBookmarkContainer');
    if(!cont) return;
    var a=document.createElement('a');
    a.href=location.href;
    if(window.opera) {
      a.rel='sidebar'; // this makes it work in Opera 7+
    } else {
      // this doesn't work in Opera 7+ if the link has an onclick handler,
      // so we only add it if the browser isn't Opera.
      a.onclick=function() {
        addBookmarkObj.exec(this.href,this.title);
        return false;
      }
    }
    a.title=document.title;
    a=cont.appendChild(a);
    a.appendChild(document.createTextNode('Bookmark This Page'));
  },
  exec:function(url, title) {
    var isKonq=(isLikelyKonqueror3 && isLikelyKonqueror3());
    var isMac=(navigator.userAgent.toLowerCase().indexOf('mac')!=-1);
    var buttonStr = isMac?'Command/Cmd':'CTRL';

    if(window.external && (!document.createTextNode ||
      (typeof(window.external.AddFavorite)=='unknown'))) {
        // IE4/Win generates an error when you
        // execute "typeof(window.external.AddFavorite)"
        // In IE7 the page must be from web server, not directly from a local
        // file system, otherwise, you get a permission denied error.
        window.external.AddFavorite(url, title); // IE/Win
    } else if(isKonq) {
      alert('You need to press CTRL + B to bookmark our site.');
    } else if((window.opera &&
        opera.buildNumber && !isNaN(opera.buildNumber()))) {
          void(0); // do nothing here (Opera 7+)
    } else if(window.opera) { // older Opera
      alert('You need to press '+buttonStr+' + T to bookmark our site.');
    } else if(window.home) { // Netscape, iCab
      alert('You need to press '+buttonStr+' + D to bookmark our site.');
    } else if(!window.print || isMac) { // IE5/Mac and Safari 1.0
      alert('You need to press Command/Cmd + D to bookmark our site.');   
    } else {
      alert('In order to bookmark this site you need to do so manually '+
        'through your browser.');
    }
  }
}

function isLikelyKonqueror3() {
  if(!document.getElementById) return false;
  if(document.defaultCharset || window.opera || !window.print) return false;
  if(window.home) return false; // Konqueror doesn't support this but Firefox,
    // which has silent support for document.all when in Quirks Mode does
  if(document.all) return true; // Konqueror versions before 3.4
  var likely = 1;
  // testing for silent document.all support; try-catch used to keep it from
  // generating errors in other browsers.
  // try-catch causes errors in IE4 and NS4.x so we use the eval() to hide it.
  // try {
  //   var str=document.all[0].tagName;
  // } catch(err) { likely=0; }
  eval("try{var str=document.all[0].tagName;}catch(err){likely=0;}");
  return likely;
}

function dss_addEvent(el,etype,fn) {
  if(el.addEventListener && (!window.opera || opera.version) &&
  (etype!='load')) {
    el.addEventListener(etype,fn,false);
  } else if(el.attachEvent) {
    el.attachEvent('on'+etype,fn);
  } else {
    if(typeof(fn) != "function") return;
    if(typeof(window.earlyNS4)=='undefined') {
      // to prevent this function from crashing Netscape versions before 4.02
      window.earlyNS4=((navigator.appName.toLowerCase()=='netscape')&&
      (parseFloat(navigator.appVersion)<4.02)&&document.layers);
    }
    if((typeof(el['on'+etype])=="function")&&!window.earlyNS4) {
      var tempFunc = el['on'+etype];
      el['on'+etype]=function(e){
        var a=tempFunc(e),b=fn(e);
        a=(typeof(a)=='undefined')?true:a;
        b=(typeof(b)=='undefined')?true:b;
        return (a&&b);
      }
    } else {
      el['on'+etype]=fn;
    }
  }
}

dss_addEvent(window,'load',addBookmarkObj.init);

chrisjum
 
Posts: 4
Joined: Sat Jun 02, 2007 6:59 pm

Postby leonard on Mon May 19, 2008 8:02 am

Hi chrisjum

Edit your javascript function.

Substitute this line:
Code: Select all
a.appendChild(document.createTextNode('Bookmark This Page'));


with:
Code: Select all
    // set the image:
    var myImg = document.createElement('img');
    var imgSrc = document.createAttribute("src");
    imgSrc.nodeValue = "http://www.jonbarron.org/images/bookmark_page.gif";
    myImg.setAttributeNode(imgSrc);

    // add a CSS-class:
    var bookmarkClass = document.createAttribute("class");
    bookmarkClass.nodeValue = "bookmarkClass";
    myImg.setAttributeNode(bookmarkClass);

    // display:
    a.appendChild(myImg);


You may now format your image with the css-class "bookmarkClass"
Here is the example:
http://devppl.chew.ch/DOM/bookmarkPage.html

Cheers!
- leonard
:%s/^M//
There are 10 kinds of people:
Those who understand binary and those who don't.
User avatar
leonard
100+ Club
 
Posts: 147
Joined: Tue Dec 18, 2007 7:11 am
Location: Switzerland

Postby chrisjum on Mon May 19, 2008 7:01 pm

Wow! That was a very thorough and amazing answer! It solved my problem perfectly! Thank you SO much!
chrisjum
 
Posts: 4
Joined: Sat Jun 02, 2007 6:59 pm

Postby leonard on Tue May 20, 2008 6:42 am

you're welcome :-)

cheers!
- leonard
:%s/^M//
There are 10 kinds of people:
Those who understand binary and those who don't.
User avatar
leonard
100+ Club
 
Posts: 147
Joined: Tue Dec 18, 2007 7:11 am
Location: Switzerland


Who is online

Users browsing this forum: No registered users and 4 guests