An Easy One Help #2 [Archive]

mbl

10-26-2004, 08:43 PM

Dear friends,

Would like and do appreciate already your help on this, as simple as possible, if you would please:

Elements are:
Text1, Text2;
Photo-1.jpg, Photo-2.jpg;
Title1, Title2.

Initially page shows:
---------------------------------------------------
Text1 {can be 1 to 3 lines, relates to Photo-1.jpg)
Text2 {ditto, relates to Photo-2.jpg}

Photo-1.jpg {which relates to Text1}
Title1 {is text title, very short, for Photo-1}
----------------------------------------------------

Action is to be:

onmouseover Text1, Photo-1.jpg replaces previous photo;
Title-1 replaces previous Title.

onmouseover Text2, Photo-2.jpg replaces previous photo;
Title-2 replaces previous Title.
--------------------------------------------------------

There are no onmouseout's and would like to use no arrays nor variables.

Thanks, everyone.

-mbl-

codegoboom

10-27-2004, 03:05 AM

How about providing the the html (at least), and explaining why you expect no use of variables, etc.

liorean

10-27-2004, 04:11 AM

Sounds like an easy solve, but we need to see the structure for the photo display, the text and the title.

mbl

10-27-2004, 05:10 AM

Dear friends,

Would like not to use arrays. OK to use a simple variable for Title-1 and Title-2.

Reason for asking utmost simplicity is because already have a working page with much detail and don't want to burden any one with all of that. This asked here is the essence of the learning block. Have been learning on a self-basis, lot of effort, and have not been able to do this, which sounds simple but not yet for me, sorry.

BELOW IS WHAT YOU ASK FOR?:

Elements are:
Text1, Text2;
Photo-1.jpg, Photo-2.jpg;
Title1, Title2.

Initially page shows:
---------------------------------------------------
Text1 {can be 1 to 3 lines, relates to Photo-1.jpg)
Text2 {ditto, relates to Photo-2.jpg}

Photo-1.jpg {which relates to Text1}
Title1 {is text title, very short, for Photo-1}
----------------------------------------------------
PAGE CODE SKELETON IS BELOW:

<HTML>
<HEAD>
</HEAD>
<BODY>

Text1 MOUSEOVER THIS TEXT TO SEE Photo1.jpg below,
etc etc etc. , END Text1.
 

Text2 MOUSEOVER THIS TEXT TO SEE Photo2.jpg below,
etc. etc. etc. etc. END Text2
 

<IMG SRC="Photo1.jpg">
 
Title-1 for Photo1

</BODY>
</HTML>

....................................
THANKS for helping!
-mbl-

mbl

10-27-2004, 08:08 AM

Sounds like an easy solve, but we need to see the structure for the photo display, the text and the title.

Dear Liorean,

THANK YOU very much for the above links you have been grouping for others to benefit from.

SOLVED the real problem by studying The Document Object Model and learning how to change text dynamically by adding id's and using the document.getElementById('id').firstChild.nodeValue capability.

Was totally in the dark, but am not that bright yet. (Had only 'How to learn HTML in 24 hours' obsolete edition even).

HOWEVER, would still appreciate a little coding on the simple page in this thread, so as not to go astray.

Still not final, but here's the the actual page:

http://www.muga-zafu.com/camel.html

Thanks.

-mbl-

Kor

10-27-2004, 08:37 AM

learning how to change text dynamically by adding id's and using the document.getElementById('id').firstChild.nodeValue capability.

maybe is a better ideea to use document.createTextNode() instead of firstChild.nodeValue, as IE and Moz have different aproach about the firstChild if it is an empty textNode....

mbl

10-27-2004, 06:30 PM

maybe is a better ideea to use document.createTextNode() instead of firstChild.nodeValue, as IE and Moz have different aproach about the firstChild if it is an empty textNode....

Thanks for the observation and will look into your suggestion.

However, will say that , from studying and reading about the Document Model 2, the precise purpose of using id= for text as in a completely avoids any null-valued children of text, as can happen for blank lines added for whatever reasons.

Do use Firefox, but just went and opened the page and it seems to be OK on either one.

Your help on earlier threads and on this one has been very helpful.

Will study what you suggest

Thaks.

-mbl-

Kor

10-28-2004, 08:22 AM

the precise purpose of using id= for text as in a completely avoids any null-valued children of text,

In this case maybe it is not an wise thing to use id's when you have a lot of cells/texts or your content have to be changed dynamically. Probably the best ideea is to use the indexed tree reference, something like...

var txt = document.getElementById('myTable').getElementsByTagName('p');

...which is in fact an array, and loop through it.

But even if so, the empty space remains a problem, as the becomes also a Parent for the textNode, thus you have not avoided the problem, only you created a new child, the tag element.

mbl

10-28-2004, 08:13 PM

In this case maybe it is not an wise thing to use id's when you have a lot of cells/texts or your content have to be changed dynamically. Probably the best ideea is to use the indexed tree reference, something like...

var txt = document.getElementById('myTable').getElementsByTagName('p');

...which is in fact an array, and loop through it.

But even if so, the empty space remains a problem, as the becomes also a Parent for the textNode, thus you have not avoided the problem, only you created a new child, the tag element.

Thanks for the clarification, friend.

The truth is I am just above water and gasping for air on these things and am learning and doing by patching here and there, both relying and stumbling on experience from older languages, and of course searching the web for examples, and asking for and getting help only in this forum so far.

However, the pages done seem stable. Have just checked them with the I.E. and Mozilla, and from remote friends some with Mac computer.

A reason may well be that there is very very little swaping of text with the aproach. The is only like two words of total no more than10 characters, and they get replaced in-totto. In other words, the entire 'paragraph' is replaced by rather simple onmouseover action. This seems to check with what you are saying about if the use is simple it'd be OK.

The text being changed is not in a cell at all. It is plain text at the bottom of a photo, being just a little legend for it. Sorry if it seemed as it was more involved than that.

Seems like what you are saying is mandatory if one were accessing parts of text in a paragraph, but am noway at that level yet.

Thanks for what you explain, for it seems quite correct.

-mbl-