Text Swap? [Archive] - Digital-Tutors

View Full Version : Text Swap?

YohimbeArts

01-16-2008, 07:28 PM

I'm trying to figure out how to have text swap much like and image swap. I have seen sites before (none that come to mind right now) that has text change as you roll over an image.
What I have are some thumb-images on the left of my page which creates a larger image swap to the right. What I'd like to do from here is have text below the large image with a description of that image, and of course, as the image has changed so will the description.

danlefeb

01-17-2008, 07:09 AM

Hello and welcome to DT!

There's a lot of ways to accomplish this. If you do a search for that effect on Google, I'd bet you'd find some free scripts you could play with.

One way you could do it would be to have a DIV block for each section of text, then create links that swap out a CSS style for each link. Then create classes in your CSS that have the display:none; attribute, that'll hide your DIV. When the OnMouseOver event occurs, call another CSS class that has that display set to true, etc. Since it's CSS, you could also include the background images in there so that swaps out as well at the same time. Hope that helps!

YohimbeArts

01-18-2008, 05:28 AM

Thank you much for the advice and the warm welcome. Being a newbie I am not very familiar with CSS or the how to read HTML too well. I am getting bits and pieces by looking at what I find on the web and what I have on my site I'm constructing. Its one of those nasty things of seeing a problem and seeing a solution but not knowing how to get there.
However, I did take your advise about the available scripts on google. I found a script that does exactly what I need but have one annoyance that I can not remedy. The code puts the text into an input tag and without it I can't figure out how to make the text show up. Heres the script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Change</title>
<script type="text/JavaScript">

</script>
</head>

<body>

<div align="center">
<input name="text" id="text" border="0" />
</div>

<p><a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the first change')">
<img src="img_small01.jpg" alt="img_small01" width="60" height="60" /></a></p>
<p><a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the second change')">
<img src="img_small02.jpg" alt="img_small02" width="60" height="60" /></a></p>
</body>
</html>

danlefeb

01-18-2008, 07:10 AM

Basically, the link is looking for a name to know where to put the text when it switches.

Here's the original link code:
<a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the first change')">

What it's saying is when the mouse goes over this link, run the javascript function called "MM_setTextOfTextfield". That function is created above in the header, where javascripts are normally kept (unless linked to externally). Without getting into the mumbo-jumbo of what that function does, basically it needs to know where to go to make the swap. That's where the name/ID come in.

So the part "MM_setTextOfTextfield('text','','This is the first change')" is saying, basically: Run the aforementioned javascript code, and run it when you find whatever is named "text", and put the text "This is the first change" in there.

In a nutshell, that's what it's doing. Or so I would assume based on what the end result is, I didn't look closely at the code... :)

All that said, try making the <div align="center"> tag read <div align="center" name="text" id="text"></div> and get rid of the INPUT object. That will tell the javascript function to put the text in the DIV instead of in the INPUT object.

YohimbeArts

01-19-2008, 05:39 AM

I found a script that works for me!

I still couldn't get the original one to work without that input box. I tried changing the index tag into a div tag and didn't get anything to show up at all. As I kept searching I found that the most common way to approach this was exactly how you stated in your first post. It looks a bit messy within the <head> but as long as it works right? Thanks for the help, i really appritiate it.

For anyone else that is interested in text swapping, here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">

var aboutImage = new Array();
aboutImage[1] = "This is Data about Image 1";
aboutImage[2] = "This is Data about Image 2";
aboutImage[3] = "This is Data about Image 3";
aboutImage[4] = "This is Data about Image 4";
aboutImage[5] = "This is Data about Image 5";
aboutImage[6] = "This is Data about Image 6";
aboutImage[7] = "This is Data about Image 7";
var aboutId
function swapText(aboutId) {
document.getElementById("aboutInfo").innerHTML = aboutImage[aboutId];
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td width="93"><a onmouseOver="javascript: swapText(1);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /><br>
<a onmouseOver="javascript: swapText(2);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /><br>
<a onmouseOver="javascript: swapText(3);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /><br>
<a onmouseOver="javascript: swapText(4);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /><br>
<a onmouseOver="javascript: swapText(5);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /><br>
<a onmouseOver="javascript: swapText(6);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /><br>
<a onmouseOver="javascript: swapText(7);"><img src="img_small02.jpg" alt="img_small02" width="60" height="60" /></a> <br />
</td>
<td width="850"><span id="aboutInfo"></span> </td>
</tr>
</table>
</body>
</html>

danlefeb

01-22-2008, 07:32 AM

Actually that looks a lot cleaner than the other script. :) Glad you got it working!