How do I replace achorText?

@mousebearMar 20.2006

Gotta be the newbie question of all time. I am trying to change an image and its text description located in an HTML file inside one iFrame from a function in another iFrame. I can change the image with the following line in the function:

parent.frames[‘[I]framename[/I]’].document.images[‘[I]imagename[/I]’].src = [I]imagefilename[/I]

But I can’t figure out how to change the text of an anchor. I have tried something like:

parent.frames[‘[I]framename[/I]’].document.anchors[‘[I]anchorname[/I]’].text = [I]string[/I]

Searching the web for syntax, it seems that anchortext is read-only, so maybe I should be using something other than an anchor to display the string I want. Any ideas?

to post a comment

JavaScript

19 Comments(s) _↴

@OverkillMar 20.2006 — #.innerHtml?

@mousebearauthorMar 20.2006 — #Boy, I thought that was going to do it, but no go. I am working in IE6.0. Here is what I have exactly:

function loadImage(imageURL,anchorText) {

if (gImageCapableBrowser) {

parent.frames['closeups'].document.images['4hSlide'].src = imageURL

parent.frames['closeups'].document.anchors['4hComment'].innerHtml = anchorText

return false;

}

else {

return true;

}

}

Again, the image replaces nicely. Maybe I should mention this is called from an onMouseover event.

@KravvitzMar 20.2006 — #JavaScript is case-sensitive. It's "innerHTML", not "innerHtml".

[url=http://www.html-faq.com/htmlframes/?framesareevil]Whay are frames so evil?[/url]

[url=http://karlcore.com/articles/article.php?id=2]Why Frames Are Bad[/url]

http://apptools.com/rants/framesevil.php

http://www.456bereastreet.com/archive/200411/who_framed_the_web_frames_and_usability/

[url=http://www.useit.com/alertbox/9612.html]Why Frames Suck (Most of the Time)(1996)[/url]

[url=http://www.htmlhelp.com/design/frames/whatswrong.html]What's wrong with frames?[/url]

http://www.tamingthebeast.net/articles/framesnoframes.htm

[url=http://www.dorward.me.uk/www/frames/]Frames - The Problems And Solutions: Explanations as to why you probably shouldn't use frames, along with alternatives that you can use instead.[/url]

@mousebearauthorMar 20.2006 — #Fixed the case, thanks, but it still doesn't do anything. The images are changing so nicely on Mouseover, I feel like I can't be that far away from a solution.

@KravvitzMar 20.2006 — #Try using document.links[] instead of document.anchors[].

If that doesn't work, we'll need to see more of your code to provide further assistance.

P.S. I hope you realize that you're using antiquated code.

@mousebearauthorMar 20.2006 — #Here is what I am trying to access in an HTML file linked to an iFrame:

<div align="left">

<A CLASS="name" name="4hComment">Ferdinand, the Pride of Pacifica 4H</A>

<IMG CLASS="image" SRC="ferdinand%2001.jpg" NAME="4hSlide" WIDTH="640" HEIGHT="480">

</DIV>

The 2nd part is the image that I am replacing on mouseover just fine. I can change the first line any way that works.

I started learning HTML a week ago. I have no clue what is antiquated and what is not. Did you mean the alternate method of specifying names without using brackets? or something else?

@OverkillMar 20.2006 — #Try this:

function loadImage(imageURL,anchorText) {
 if (gImageCapableBrowser) {
 parent.frames['closeups'].document.images['4hSlide'].src = imageURL
 parent.frames['closeups'].document.[color=blue]getElementById('4hComment').innerHTML[/color] = anchorText
 return false;
 }
 else {
 return true;
 }
 }
 
 
 
 
 &lt;!-- This is on the other frame --&gt;
 &lt;div align="left"&gt;
 &lt;A CLASS="name" [color=blue][b]id[/b]="4hComment"[/color]&gt;Ferdinand, the Pride of Pacifica 4H&lt;/A&gt;
 &lt;IMG CLASS="image" SRC="ferdinand%2001.jpg" id="4hSlide" WIDTH="640" HEIGHT="480"&gt;
 &lt;/DIV&gt;

If it doesn't work, could you give us the code w/ the innerframes?

@mousebearauthorMar 20.2006 — #That did it. Thank you very much!

Maybe you could help with one last thing. The comments are read in from a text file (that's the way JAlbum let's you annotate text). If certain special characaters are put in, like "Ferdinand's Bath" (the apostrophe) it understandably messes up the code because it sees the apostropy as the end of the string. Any ideas here?

@OverkillMar 20.2006 — #The comments are read in from a text file[/QUOTE] Is this using JSP? PHP? With PHP you use:
$comments = addslashes($comments);

With other languages you use string functions (in this case javascript):

http://72.14.203.104/search?q=cache:rMsqsR39cgwJ:developer.netscape.com/viewsource/angus_strings.html+javascript+string&hl=en&gl=us

@mousebearauthorMar 20.2006 — #I'll try both these methods when I get home. Looks like there is a good chance there is enough information here to solve this. I am embarrased to say I don't even know what JSP and PHP stand for. I am going to look them up.

@mousebearauthorMar 21.2006 — #Well, I admit defeat. I believe I have javascript inside an HTML file.

Here is the portion of the file that calls the function:

<A HREF="slides/ferdinand%20bath%2001.htm" onMouseover="return(loadImage('ferdinand bath 01.jpg','Getting Ferdinand secure for his 1st Bath'))" target="closeups">

<IMG CLASS="image" SRC="thumbs/ferdinand%20bath%2001.jpg" WIDTH="70" HEIGHT="52" BORDER=0

TITLE="Name: ferdinand bath 01

Getting Ferdinand secure for his 1st Bath">



<script language="JavaScript">

image4 = new Image();

image4.src = "slides/ferdinand%20bath%2001.jpg";

</script>

</A>

I think I can reduce that down to just the critical part (for this discussion):

<A HREF="slides/ferdinand%20bath%2001.htm" onMouseover="return(loadImage('ferdinand bath 01.jpg','Getting Ferdinand secure for his 1st Bath'))" target="closeups"></A>

I don't have any special characters in the example above, but I would like to be able to insert quotes, apostrophes, etc.

Here is what it is feeding:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function loadImage(imageURL,anchorText) {

if (gImageCapableBrowser) {

parent.frames['closeups'].document.images['4hSlide'].src = imageURL

parent.frames['closeups'].document.getElementById('4hComment').innerHTML = anchorText

return false;

}

else {

return true;

}

}

</SCRIPT>

Help!

@phpnoviceMar 21.2006 — #But I can't figure out how to change the text of an anchor. I have tried something like:

parent.frames['[I]framename[/I]'].document.anchors['[I]anchorname[/I]'].text = [I]string[/I][/QUOTE]
Don't use the NAME attribute on a link -- unless it is an anchor (bookmark), only. For a true hyperlink, use an ID:

parent.frames['framename'].document.getElementById('linkID').innerHTML = string

@mousebearauthorMar 21.2006 — #Thanks again phpnovice. I did get that help somewhere up that thread. You can see I made this change, but then the problem became passing special characters to anchorText.

The following:

<A HREF="slides/ferdinand%20bath%2001.htm" onMouseover="return(loadImage('ferdinand bath 01.jpg','Getting Ferdinand secure for his 1st Bath'))" target="closeups"></A>

works great to feed the function:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function loadImage(imageURL,anchorText) {

if (gImageCapableBrowser) {

parent.frames['closeups'].document.getElementById('4hComment').innerHTML = anchorText

return false;

}

else {

return true;

}

}

</SCRIPT>

Except when someone wants to put quotes or apostrophies in the photo comment. Those special symbols end the string early.

@phpnoviceMar 21.2006 — #Thanks again phpnovice. I did get that help somewhere up that thread.[/QUOTE]
Oh, didn't see it.
Except when someone wants to put quotes or apostrophies in the photo comment. Those special symbols end the string early.[/QUOTE]
That problem will only afect this part of your code:

onMouseover="return(loadImage('ferdinand bath 01.jpg','Getting Ferdinand secure for his 1st Bath'))"

It will not affect the function itself -- unless you're doing more than you're showing. ?

So, what (where) is your remaining problem?

@mousebearauthorMar 21.2006 — #Correct. If the comment was, "Ferdinand's 1st Bath", then the onMouseover event never works. onMouseover calls loadImage and feeds it 2 parameters. loadImage replaces the text in the 'closeup' frame with the 2nd parameter (actually I deleted a line in loadImage to make the post shorter, in case you were wondering where the variable imageURL gets referenced), but it never gets to loadImage if onMouseover gets messed up with text strings like the one with the apostropy above. So I am looking for how to pass this string literally. I have tried "addslashes", but not successfully. thanks...

@phpnoviceMar 21.2006 — #addslashes is PHP code. The following is how it would be hardcoded in JavaScript:

onMouseover="return loadImage('ferdinand bath 01.jpg','Getting secure for Ferdinand's 1st Bath')"

@mousebearauthorMar 21.2006 — #Unfortunately, this string is generated by an iterative process that I have not shown you. There is on file for each photo in the directory. I don't have the option to put it in manually. Any way I can do this in an automated way without writing a big search and replace utility for a lot of special characters.

@phpnoviceMar 21.2006 — #I would need to see what code you're using to generate the content of that in-line [b]onmouseover[/b] event.

@mousebearauthorMar 22.2006 — #2 thoughts: Would it be pretty easy to put a slash in front of every character, regardless if it was special or not? I will have to post a question on the JAlbum forum to see how the files are created. There is an "iterator" function, but the JAlbum software takes a template file (.htt) that I edit, and turns it into an HTML file. It makes many slide files from one template file, but the file in question takes a bunch of lines of code and runs a couple loops on them, one for rows and one for columns (I only use one column, so theoretically I could delete that part of the code), expanding it within the HTML file. Let me ask the JAlbum folks first before I burden you with this.

Also in #JavaScript _↴

Copy text to the clipboard question...function not passing variable Javascript Help

Success!

Help @mousebear spread the word by sharing this article on Twitter...

Tweet This

How do I replace achorText?

19 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I replace achorText?

19 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #JavaScript _↴