How To Make Picture Link To Bookmark Website?

npl · December 1, 2011

Hey, My site is www.borealtrek.com , there is a picture on it I want be able to be when clicked bookmark the site in the users web browser. I did a quick google and I turned up somethings. The first few links showed how to do it in Java Script. Can anyone give me a hand? lol I am still wrapping my head around Html and CSS.

This is the code that needs to be "bookmarkable" is...

<td>

Thanks for the help!

xwinuser · December 1, 2011

Here ya go!

I have used Java scripts for years and although I do understand how to fix a few problems in the script if it gets broken I (like many other people) usually just copy and paste the script in the beginning. This is a long accepted practice among site builders as there are thousands of Java script sites out there that offer custom scripts for free.

Anyway.

I know you said you already Googled some info but I Googled also and found this - http://www.codelifter.com/main/javascript/bookmarkthispage1.html

It starts out by showing script for a text link to bookmark your page but if you scroll down in the script it shows how to set an image as the anchor.

var txt = "<img src='some.gif' width='100' height='30' border='0'>"

In red is what they have but yours would look like this

var txt = "<img src="http://borealtrek.com/wp-content/uploads/2011/12/social_02.jpg" width="23" height="30" alt="">"

The whole script would look like this and be in the body of the HTML - You could edit out the advertisement of course but not sure if that creates any ethics issues (if you care).

// http://www.codelifter.com

// Free for all users, but leave in this header

// message to show in non-IE browsers

var txt = "<img src="http://borealtrek.com/wp-content/uploads/2011/12/social_02.jpg" width="23" height="30" alt="">"

// url you wish to have bookmarked

var url = "http://www.codelifter.com";

// caption to appear with bookmark

var who = "CodeLifter.com Software and Scripts"

// do not edit below this line

// ===========================

var ver = navigator.appName

var num = parseInt(navigator.appVersion)

if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {

document.write('<A HREF="javascript:window.external.AddFavorite(url,who);" ');

document.write('onMouseOver=" window.status=')

document.write("txt; return true ")

document.write('"onMouseOut=" window.status=')

document.write("' '; return true ")

document.write('">'+ txt + '</a>')

}else{

txt += " (Ctrl+D)"

document.write(txt)

}

</script>

</font>

____________________________________________________________________________________

It "seems" that social_02.jpg is a white spacer pic. This are usually GIFs.

This is an old technique used to push other objects to a certain part of the site instead.

Before CSS as wiki points out here - http://en.wikipedia.org/wiki/Spacer_GIF

Nothing really wrong with that. Just noticing.

npl · December 1, 2011

I really appreciate your help!

However I must of done something wrong.

I changed the image social_02.jpg to social_03.jpg and then copy and pasted your code into the rest of the widget.

It looks like this, and it doesn't work. I cleared my cache and everything. Any idea what is wrong?

<html>

<head>

<title>social</title>

</head>

<tr>

<td>

// http://www.codelifter.com

// Free for all users, but leave in this header

// message to show in non-IE browsers

var txt = "<img src="http://borealtrek.com/wp-content/uploads/2011/12/social_03.jpg" width="23" height="30" alt="">"

// url you wish to have bookmarked

var url = "http://www.codelifter.com";

// caption to appear with bookmark

var who = "CodeLifter.com Software and Scripts"

// do not edit below this line

// ===========================

var ver = navigator.appName

var num = parseInt(navigator.appVersion)

if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {

document.write('<A HREF="javascript:window.external.AddFavorite(url,who);" ');

document.write('onMouseOver=" window.status=')

document.write("txt; return true ")

document.write('"onMouseOut=" window.status=')

document.write("' '; return true ")

document.write('">'+ txt + '</a>')

}else{

txt += " (Ctrl+D)"

document.write(txt)

}

</script>

</font>

</td>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</body>

</html>

December 1, 2011

You can place your image inside an anchor, and then use the following link to bookmark the page:

javascript:window.external.AddFavorite('http://borealtrek.com', 'Borealtrek Photagraphy');

However, note that many modern browsers like opera, chrome, and others do not have this functionality. This is to prevent warez and spam sites from automatically bookmarking themselves, causing security problems and a possible security breach. For browsers that have this disabled, there is no workaround; if the developers find out about one it will be disabled in the next update.

npl · December 1, 2011

You can place your image inside an anchor, and then use the following link to bookmark the page:
javascript:window.external.AddFavorite('http://borealtrek.com', 'Borealtrek Photagraphy');
However, note that many modern browsers like opera, chrome, and others do not have this functionality. This is to prevent warez and spam sites from automatically bookmarking themselves, causing security problems and a possible security breach. For browsers that have this disabled, there is no workaround; if the developers find out about one it will be disabled in the next update.

Awww.... then making this isn't even worth my time. Only one guy on IE 2002 will be able to use it.

Thanks for the help anyways!

xwinuser · December 1, 2011

I fixed it! Sorry! Had to use single quotes inside the tag.

This worked for me using IE 9. It did pop up a security message but I just clicked to Allow and it worked fine.

<html>

<head>

<title>social</title>

</head>

<tr>

<td>

// http://www.codelifter.com

// Free for all users, but leave in this header

// message to show in non-IE browsers

var txt = "<img src='http://borealtrek.com/wp-content/uploads/2011/12/social_03.jpg' width='31' height='30' alt=''>"

// url you wish to have bookmarked

var url = "http://www.borealtrek.com";

// caption to appear with bookmark

var who = "Borealtrek"

// do not edit below this line

// ===========================

var ver = navigator.appName

var num = parseInt(navigator.appVersion)

if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {

document.write('<A HREF="javascript:window.external.AddFavorite(url,who);" ');

document.write('onMouseOver=" window.status=')

document.write("txt; return true ")

document.write('"onMouseOut=" window.status=')

document.write("' '; return true ")

document.write('">'+ txt + '</a>')

}else{

txt += " (Ctrl+D)"

document.write(txt)

}

</script>

</font>

</td>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</body>

</html>

______________________________________________________________________

Ah crap. Well it still only shows Crtl + D for FireFox. Works in IE 9. I would have to play around with it some more to make it work in FF probably.

_______________________________________________________________________________________________

Edited December 1, 2011 by xwinuser

npl · December 1, 2011

Thanks for all of the help Xwinuser!

xwinuser · December 1, 2011

Looks like you went with a Mail button instead. Looks nice. Sorry the other didn't work out.

npl · December 2, 2011

The fact that a booking marking button won't work well on most browsers kills the idea unfortunately. I was hoping this would work out. Most of my favorite and most visited sites are booked marked. The mail subscription button is the best next runner up to drive traffic. Thanks for the help though !

Sign In

How To Make Picture Link To Bookmark Website?

Recommended Posts

npl

Link to comment

Share on other sites

xwinuser

Link to comment

Share on other sites

npl

Link to comment

Share on other sites

Guest xaav

Link to comment

Share on other sites

npl

Link to comment

Share on other sites

xwinuser

Link to comment

Share on other sites

npl

Link to comment

Share on other sites

xwinuser

Link to comment

Share on other sites

npl

Link to comment

Share on other sites

Join the conversation

HelioHost

Donate

Forums

Activity