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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

trying to replace text with different text

Status
Not open for further replies.
lollypop1

lollypop1

Technical User
Apr 13, 2005
13
0
0
GB
Hi All

I sell dresses. I want to have a dress description, then when the user clicks or rollsover a 'more info' button, the description is replaced with size info, colour etc.

I dont want to use layers (using dreamweaver) and I dont want to use pictures (too time consuming and will effect my SEO).

So! I was kindly given this code... my I cant seem to place it where I want it to be on my page....


any tips? or other suggestions? Thanks so much
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = showOriginalText;

function showInfo(thisInfo){

if(thisInfo == "info_1")
document.getElementById('display_info').innerHTML = "This is the info for dress 1.";
else if(thisInfo == "info_2")
document.getElementById('display_info').innerHTML = "This is the info for dress 2.";
else
showOriginalText();

}

function showOriginalText(){
document.getElementById('display_info').innerHTML = "back to original text";
}
</script>
</head>

<body>
<br />
<br />

Dress 2 Dress 1<br />
<a href="javascript:void(0);" onmouseover="showInfo('info_1')" onmouseout="showOriginalText();">More</a><br />
<a href="javascript:void(0);" onmouseover="showInfo('info_2')" onmouseout="showOriginalText();">More</a><br />
<hr />

<p id="display_info"></p>
</body>
</html>
 
Sort by date Sort by votes
window.onload = showInfo;
Hi

Personally I would separate the data and the code :
JavaScript: 
window[teal].[/teal]onload [teal]=[/teal] showInfo[teal];[/teal]

[b]var[/b] info[teal]=[/teal][teal]{[/teal]
  [green][i]'default'[/i][/green][teal]:[/teal][green][i]'back to original text'[/i][/green][teal],[/teal]
  [green][i]'info_1'[/i][/green][teal]:[/teal][green][i]'This is the info for dress 1.'[/i][/green][teal],[/teal]
  [green][i]'info_2'[/i][/green][teal]:[/teal][green][i]'This is the info for dress 2.'[/i][/green]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]showInfo[/color][teal]([/teal]thisInfo[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'display_info'[/i][/green][teal]).[/teal]innerHTML[teal]=[/teal]info[teal][[/teal]thisInfo [b]in[/b] info[teal]?[/teal]thisInfo[teal]:[/teal][green][i]'default'[/i][/green][teal]][/teal]
[teal]}[/teal]
HTML: 
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"javascript:void(0);"[/i][/green] [maroon]onmouseover[/maroon][teal]=[/teal][green][i]"showInfo('info_1')"[/i][/green] [maroon]onmouseout[/maroon][teal]=[/teal][green][i]"showInfo()"[/i][/green][b]>[/b]More[b]</a><br[/b] [b]/>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"javascript:void(0);"[/i][/green] [maroon]onmouseover[/maroon][teal]=[/teal][green][i]"showInfo('info_2')"[/i][/green] [maroon]onmouseout[/maroon][teal]=[/teal][green][i]"showInfo()"[/i][/green][b]>[/b]More[b]</a><br[/b] [b]/>[/b]
By the way, what you want exactly ? Your code works.


Feherke.
 
Upvote 0 Downvote
Hi

Hmm... Or you want kind of template ?
JavaScript: 
window[teal].[/teal]onload[teal]=[/teal]showInfo

[b]var[/b] template[teal]=[/teal][green][i]'This %color %article is available in size %size.'[/i][/green]
[b]var[/b] defaul[teal]=[/teal][green][i]'Get more details about this product'[/i][/green]
[b]var[/b] info[teal]=[/teal][teal]{[/teal]
  [green][i]'info_1'[/i][/green][teal]:[/teal][teal]{[/teal][green][i]'article'[/i][/green][teal]:[/teal][green][i]'dress'[/i][/green][teal],[/teal][green][i]'size'[/i][/green][teal]:[/teal][purple]50[/purple][teal],[/teal][green][i]'color'[/i][/green][teal]:[/teal][green][i]'red'[/i][/green][teal]}[/teal][teal],[/teal]
  [green][i]'info_2'[/i][/green][teal]:[/teal][teal]{[/teal][green][i]'article'[/i][/green][teal]:[/teal][green][i]'skirt'[/i][/green][teal],[/teal][green][i]'size'[/i][/green][teal]:[/teal][purple]55[/purple][teal],[/teal][green][i]'color'[/i][/green][teal]:[/teal][green][i]'green'[/i][/green][teal]}[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]showInfo[/color][teal]([/teal]thisInfo[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]thisInfo [b]in[/b] info[teal])[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'display_info'[/i][/green][teal]).[/teal]innerHTML[teal]=[/teal]template[teal].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/%(\w+)/g[/fuchsia][teal],[/teal][b]function[/b][teal]([/teal]p0[teal],[/teal]p1[teal])[/teal][teal]{[/teal][b]return[/b] info[teal][[/teal]thisInfo[teal]][[/teal]p1[teal]][/teal][teal]}[/teal][teal])[/teal]
  [b]else[/b] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'display_info'[/i][/green][teal]).[/teal]innerHTML[teal]=[/teal]defaul
[teal]}[/teal]
The HTML is the same as in my previous code.

Feherke.
 
Upvote 0 Downvote
Thank you!

What I'd ideally like, is to have text 'A' in a table cell (positioned exactly where I want it on the page'...

then when you click on a 'button 1'... Text A is replaced with text B...

you then click, rollover, whatever, 'Button 2' which replaces text b with text a and back and forth.

so, i'm basically replacing text A with text B, then text B with text A, by clicking on a button....


Problems are that I can't used header tags for some reason (I like to use these for SEO purposes) and I can get it to appear where I want it!

thanks so much

 
Upvote 0 Downvote
Hi

lollypop1 said:
Problems are that I can't used header tags for some reason
Click to expand...
I can see no reason to not be able to use them. Also I can se no reason to mention it here. How could header tags be involved in this task ?
lollypop1 said:
and I can get it to appear where I want it!
Click to expand...
Positioning should be matter of CSS, so subject for forum215. But while you mentioned tables, doing it the old way using [tt]table[/tt] elements should also be possible.

Anyway, better post the HTML of that page ( no server-side code, please, just the HTML displayed by your browser's View Source command ), with all other static things, and mark the places where the text has to change.

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

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
170
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
150
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
179
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
131
Rayj0000
Rayj0000
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
144
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top