Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

div tag image replacement 1

Status
Not open for further replies.
Kirogl

Kirogl

Programmer
Mar 24, 2004
14
0
0
GB

Hi I'm trying to get Javascript to replace the first character of a div tag with a image (i.e. image of letter a if the first letter is a, image of letter b if the first letter is b etc.) and then replace the first text with the same text less the first character.

however this script it just tells me an object is required (somewhere around the body tag), so i've no idea what the problem is!

Does anyone have any idea what I've done wrong?

Code: 
<html>
<head>

<script type="text/javascript">
<!--
function SFLIR(id_name){ 
var divs=document.getElementsByTagName('div') 
for (var i=0;i<divs.length;i++){ 
	if( div[i].id.indexOf(id_name)===0 ) {
		bg_letter = div[i].innerHTML.charAt(0);
		if (bg_letter != "<") {
			div[i].style.backgroundImage.src = "images\lettersets\"+bg_letter+".gif";
			div[i].style.backgroundImage.alt = bg_letter;
			inht = div[i].style.innerHTML;
			div[i].style.innerHTML = inht.subscring(1);
			}
		} 
	} 
} 
->
</script>

</head>
<body onLoad="SFLIR('main')">

Shouldn't change<br/>
<div id="main">Should change</div><br/>
<div>Shouldn't change</div><br/>

</body></html>
 
Sort by date Sort by votes
Hi

At first look this two lines looks really strange, replace them :
Code: 
div[i].style.backgroundImage = "url(images/lettersets/"+bg_letter+".gif)";
div[i].alt = bg_letter;

Feherke.
 
Upvote 0 Downvote
Hi

At second look it is horrible.
Code: 
<html>
<head>

<script type="text/javascript">
<!--
function SFLIR(id_name)
{
  var divs=document.getElementsByTagName('div')
  for (var i=0;i<divs.length;i++){
    if ( div[red]s[/red][i].id.indexOf(id_name)===0 ) {
      bg_letter = div[red]s[/red][i].innerHTML.charAt(0);
      if (bg_letter != "<") {
        div[red]s[/red][i].style.backgroundImage[s][red].src[/red][/s] = "[red]url([/red]images[red]/[/red]lettersets[red]/[/red]"+bg_letter+".gif[red])[/red]";
        div[red]s[/red][i].[s][red]style.backgroundImage.[/red][/s][red]title[/red] = bg_letter;
        inht = div[red]s[/red][i].[s][red]style[/red][/s].innerHTML;
        div[red]s[/red][i].[s][red]style.[/red][/s]innerHTML = inht.subs[red]t[/red]ring(1);
      }
    }
  }
}
[red]-[/red]->
</script>

</head>
<body onLoad="SFLIR('main')">

Shouldn't change<br/>
<div id="main">Should change</div><br/>
<div>Shouldn't change</div><br/>

</body></html>

Feherke.
 
Upvote 0 Downvote
yes, it is :)

I noticed the var names (div/divs) while I was amending the html.

Thanks your first hint was enogth to get the letters to appear (after I fixed my silly mistakes)

Thanks.

-----
 
Upvote 0 Downvote
Fixed!

Thanks feherke for your help. I guess the lession here is don't write javascript when you've only had 3 hrs sleep.

Below is the working code should anyone find be searching for this.

Code: 
<html>
<head>

<script type="text/javascript">
<!--
function SFLIR(id_tag){ 
var divs=document.getElementsByTagName('div') 
for (var i=0;i<divs.length;i++){ 
		if (divs[i].id == id_tag) {
			bg_letter = divs[i].innerHTML.charAt(0);
			img_insert = "<img src=images/lettersets/"+bg_letter+".gif style=float:left; />"
			inht = divs[i].innerHTML;
			inht2 = inht.substring(1);
			divs[i].innerHTML = img_insert+inht2;
			}
		}
}

/-->

</script>

</head>
<body onLoad="SFLIR('main')">

Shouldn't change<br/>
<div id="main">Should change</div><br/>
some random text<br/>
some random text<br/>
some random text<br/>
some random text<br/>
<div>Shouldn't change</div><br/>

</body></html>

-----
 
Upvote 0 Downvote
Hi

One more thing :
Code: 
/[red]/[/red]-->
Not a big deal, but my FireFox objected.

Ok, another thing. Based on your markup the page is intended to be XHTML. So the script code should be enclosed between [tt]<![CDATA[[/tt] .. [tt]]]>[/tt] instead of [tt]<!--[/tt] .. [tt]-->[/tt] . See How do I use the <script> tag? by BabyJeffy.

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
546
ggriffit
ggriffit
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
115
waubain
waubain
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
183
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
97
gmmastros
gmmastros
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
125
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top