4 Replies - 412 Views - Last Post: 22 February 2011 - 08:17 PM

#1 dirtyrice1977  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 23-January 11

problem with function and images

Posted 22 February 2011 - 02:41 PM

I'm trying to get a series of large business cards to show up when i click on the radio buttons. Instead of the actual image I get the words cards/design1blank.png. I believe the for loop and the array are good. I think the problem is with my function. This is my first time trying the getElementById instead of doing through all the child nodes.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
	largePic = new Array();
for(i=1;i<=5;i++)
{
	largePic[i] = new Image();
	largePic[i].src = "cards/design" + i + "blank.png";
}	
	function switchCard(elem)
	{
		document.getElementById("cardTable").innerHTML = largePic[elem].src;
	}
</script>



</head>

<body background="graphics/background.jpg">


<form action="completeorder.html" method="post" name="carddata">
<table width="800" border="0" cellspacing="3" cellpadding="3"  bgcolor="white" align="center">
  <tr>
    <td height="117" colspan="2"><img src="graphics/businesscardtitle.png" width="968" height="114" /></td>
  </tr>
  <tr>
    <td width="228" rowspan="2">Phone/Other
      <br />
      <input type="text" name="phone" size="35" /><br />
      Fax/Other<br />
      <input type="text" name="fax" size="35" /><br />
      Company Name<br />
      <input type="text" name="company" size="35" /><br />
      Company Message<br />
      <input type="text" name="message" size="35" /><br />
      Full Name<br />
      <input type="text" name="fullname" size="35" /><br />
      Job Title<br />
      <input type="text" name="jobtitle" size="35" /><br />
      Address Line 1<br />
      <input type="text" name="address1" size="35" /><br />
    Address Line 2<br />
    <input type="text" name="address2" size="35" /><br />
    Address Line3<br />
    <input type="text" name="address3" size="35" /><br />
    Email/Other<br />
    <input type="text" name="email" size="35" /><br />
    Web/Other<br />
    <input type="text" name="web" size="35" /><br />
       <p>
    <input type="button" value="Check Design" onclick="" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" value="Complete Order" />
    </p>
    </p></td>
    <td width="545" height="106">
    <table width="641" border="0" align="center" cellpadding="3" cellspacing="3">
      <tr align="center">
        <td width="115"><input type="radio" name="design" id="card1"  checked="checked" onclick = "switchCard(1)"/></td>
        <td width="115"><input type="radio" name="design" id="card2" onclick = "switchCard(2)" /></td>
        <td width="115"><input type="radio" name="design" id="card3" onclick = "switchCard(3)" /></td>
        <td width="115"><input type="radio" name="design" id="card4" onclick = "switchCard(4)" /></td>
        <td width="133"><input type="radio" name="design" id="card5" onclick = "switchCard(5)" /></td>
      </tr>
      <tr align="center">
        <td><img src="thumbs/design1blank.jpg" width="100" height="57" /></td>
        <td><img src="thumbs/design2blank.jpg" width="100" height="57" /></td>
        <td><img src="thumbs/design3blank.jpg" width="100" height="57" /></td>
        <td><img src="thumbs/design4blank.jpg" width="100" height="57" /></td>
        <td><img src="thumbs/design5blank.jpg" width="100" height="57" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="353">

   <!--This is the location of your business card. You can use the span tag and work with the innerHTML ability -->

    <span name="businesscard">
    <table width="670" border="1" cellspacing="3" cellpadding="3" height="383"  background="cards/design1blank.png" id = "cardTable" >
      <tr>
        <td>&nbsp;</td>
		<td width="248" ></td>
      </tr>
    </table>
    </span>



Is This A Good Question/Topic? 0
  • +

Replies To: problem with function and images

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4300
  • View blog
  • Posts: 12,064
  • Joined: 18-April 07

Re: problem with function and images

Posted 22 February 2011 - 03:04 PM

I assume you want to change the background image of the card <table> tag right? If so, you wouldn't be using innerHTML in your function, you would be setting the style of the table itself.

document.getElementById("cardTable").style.backgroundImage = "url(" + largePic[elem].src + ")";



We are saying "Get the <table> element with the ID cardTable and style its background image with the image located at the following URL".

Now also make sure that the URL you are providing there does map to an image. If you do not have a "cards" folder full of images in a sub directory below where the CSS file is located... in other words, relative to the CSS file, not relative to the document where the CSS file is being included.

I have a gut feeling you have images in the wrong spot and relative to the document, not to the CSS file. :)
Was This Post Helpful? 1
  • +
  • -

#3 dirtyrice1977  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 23-January 11

Re: problem with function and images

Posted 22 February 2011 - 05:41 PM

View PostMartyr2, on 22 February 2011 - 03:04 PM, said:

I assume you want to change the background image of the card <table> tag right? If so, you wouldn't be using innerHTML in your function, you would be setting the style of the table itself.

document.getElementById("cardTable").style.backgroundImage = "url(" + largePic[elem].src + ")";



We are saying "Get the <table> element with the ID cardTable and style its background image with the image located at the following URL".

Now also make sure that the URL you are providing there does map to an image. If you do not have a "cards" folder full of images in a sub directory below where the CSS file is located... in other words, relative to the CSS file, not relative to the document where the CSS file is being included.

I have a gut feeling you have images in the wrong spot and relative to the document, not to the CSS file. :)


The code that you provided worked perfectly. I don't understand why the addition of the url made it work.
Here is another example of using multiple images that I used in another project of mine. Why did I not have to use the URL here? Oh, and of course thank you for your help!
var imgSwap2 = new Array
	for (i=1;i<=7;i++)
	{
		imgSwap2[i] = new Image();
		imgSwap2[i].src = "foodswap/dessert" + i + ".jpg";
	}
	function change2(elem)
	{
		document.dessert1.src = imgSwap2[elem].src;
	}


Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4300
  • View blog
  • Posts: 12,064
  • Joined: 18-April 07

Re: problem with function and images

Posted 22 February 2011 - 07:56 PM

Well that is because you are changing the src of an image not the background of a table? I can only assume dessert1 in that example is an image. The first example you were grabbing the ID of a table element, not an image. Table elements don't have a src and innerHTML was going to change the actual HTML inside the <table> tag. So what I provided you is setting the STYLE of the <table> element. We changed its background style CSS attribute.

Let me know if that is not clear enough. :)
Was This Post Helpful? 1
  • +
  • -

#5 dirtyrice1977  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 23-January 11

Re: problem with function and images

Posted 22 February 2011 - 08:17 PM

View PostMartyr2, on 22 February 2011 - 07:56 PM, said:

Well that is because you are changing the src of an image not the background of a table? I can only assume dessert1 in that example is an image. The first example you were grabbing the ID of a table element, not an image. Table elements don't have a src and innerHTML was going to change the actual HTML inside the <table> tag. So what I provided you is setting the STYLE of the <table> element. We changed its background style CSS attribute.

Let me know if that is not clear enough. :)



Thank you that helped a lot.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1