Can I/How do I use an image in this link?

Page 1 of 1

4 Replies - 715 Views - Last Post: 28 March 2008 - 01:09 PM

#1 BenignDesign  Icon User is online

  • I cause cancer.
  • member icon




Reputation: 4656
  • View blog
  • Posts: 8,879
  • Joined: 28-September 07

Can I/How do I use an image in this link?

Posted 28 March 2008 - 11:44 AM

I hate Javascript.... I'm such a noob at it.

Anywho.... if anyone would be so kind as to tell me if I can use an image here instead of text... and HOW to use and image here instead of text, I would be forever grateful.

<script>reloadLink("1", "Style 1");</script>


The code is in the actual HTML and is designed to swap stylesheets when the link is selected. I have a little 15x15 pixel image I would like to use in place of "Style 1" in the code... can I do it and if so, how? It works fine with the text link.... I'm hoping there is a simple solution for an image option.

Thanks again!

This post has been edited by BenignDesign: 28 March 2008 - 11:58 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Can I/How do I use an image in this link?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: Can I/How do I use an image in this link?

Posted 28 March 2008 - 12:00 PM

I am not fully sure I know what you are attempting to do here, but if you need a reference to the actual image you can attach an id attribute to the image in HTML and then use document.getElementById("idyougaveimage"); in your javascript to get access to the image. Then it is only a matter of changing the "src" property of that image to change its picture.

I am sure there is something that you could use in the example below...

<html>
<head>
<title></title>
<script type="text/javascript">

function swapImage() {
	var theimage = document.getElementById("myimage");

	theimage.src = "image2.jpg";
}
</script>
</head>

<body>

<img src="image1.jpg" alt="Test Graphic" border="0" id="myimage"/>

<input type="button" onclick="swapImage()" value="Change pic"/>
</body>
</html>


Notice how I get the reference to the image in the swapImage() function. Perhaps you can pass that variable to your reloadLink function where you then change its .src property to change the picture.

I can't fully say since you have shown very little code and it is unknown what your reloadLink actually does. But I am sure the example can prove useful somehow.

:)
Was This Post Helpful? 0
  • +
  • -

#3 BenignDesign  Icon User is online

  • I cause cancer.
  • member icon




Reputation: 4656
  • View blog
  • Posts: 8,879
  • Joined: 28-September 07

Re: Can I/How do I use an image in this link?

Posted 28 March 2008 - 12:08 PM

Valid point. I didn't show you much. Hence, I will show you more.

This is my Javascript (external file called "swap.js"):

var StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="css/' + StyleFile + '">');
function reloadLink(styleNum, text) {
	  document.write("<a href=\"java script: document.cookie='style=" +
			styleNum + "'; window.location.reload();\" class=nav>" + text + "</a>");
	  }


Like, I said, it swaps stylesheets. There are multiple options for the stylesheets, hence multiple tiny images I would like to have lined up across the page.

The HTML:


<html>
<head>
<title>ubernoob tries a new trick</title>
<script type="text/javascript" src="swap.js"></script>
</head>

<body>
<script>reloadLink("0", "Link 1");</script>
<script>reloadLink("1", "Link 2");</script>
<script>reloadLink("2", "Link 3");</script>
</body>
</html>

This post has been edited by BenignDesign: 28 March 2008 - 12:08 PM

Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: Can I/How do I use an image in this link?

Posted 28 March 2008 - 12:31 PM

Well in your function reloadLink document.writeline an actual image tag that has an onclick handler...


<html>
<head>
<title></title>
<script type="text/javascript">

var StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="css/' + StyleFile + '">');
function reloadLink(styleNum, text) {
	  document.write("<img src=\"" + text + "\"  onclick=\"java script: document.cookie='style=" +
			styleNum + "'; window.location.reload();\"/>");
}
</script>
</head>



<body>
<script>reloadLink("0", "image1.jpg");</script>
<script>reloadLink("1", "image2.jpg");</script>
<script>reloadLink("2", "image3.jpg");</script>
</body>
</html>


And of course that isn't working for you, then instead of putting all the code inline to the onclick event, have the onclick event just call another javascript function (passing it the style number) and have it set the cookie and reload. Now this will respond to clicking the banners even though they don't act like links. You could wrap the images in your a tag if you prefer, but I think this might be what you are looking for. This will insert your images where you can then click them and get the same action as if they were text.

I hope this is what you are looking to do. :)
Was This Post Helpful? 0
  • +
  • -

#5 BenignDesign  Icon User is online

  • I cause cancer.
  • member icon




Reputation: 4656
  • View blog
  • Posts: 8,879
  • Joined: 28-September 07

Re: Can I/How do I use an image in this link?

Posted 28 March 2008 - 01:09 PM

woohoo! I'm not as dumb as I thought! I figured it out!

Here was the final solution:

The JS file:
var StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="css/' + StyleFile + '">');
function reloadLink(styleNum) {
	  document.write("<a href=\"java script: document.cookie='style=" +
			styleNum + "'; window.location.reload();\" class=nav><img src='thb/" + styleNum + ".jpg' style='border:0px;' /></a>");
	  }



The HTML:
<script>reloadLink("0");</script>
<script>reloadLink("1");</script>
<script>reloadLink("2");</script>


Thanks so much for the help, Martyr! Got my brain going in the right direction.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1