Looking for a Image AND Text swap script 2

[dcroe05]

I'm having a bear of a time finding a script...I'm hoping someone can point me in the right direction.

I have a page with 4 links in a sidebar, and several other text and IMG elements.

I need a script that will allow the user to click on of the four links and have the other text and IMG elements change.

I've found scripts for just text or just an image, but not together.

 

[dwarfthrower]

You can take the code that does one and the code that does the other and wrap the two of them up into one function.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[dcroe05]

I'm sure I could if I were more knowledgeable about Javascript. The problem I've run into so far is that the scripts that do one or the other, do them in different ways.

 

[dwarfthrower]

I'm sure I could if I were more knowledgeable about Javascript.

Tek-Tips is neither a learning resource, nor a find-a-script service.

For learning Javascript I recommend

http://www.w3schools.com

It's very difficult to give you any real advice on your problem. You've not listed either script you're looking to combine, so no-one will be able to offer any advice on how to go about combining the two. Nor have you linked to your page or shown your HTML code, so no-one would even be able to write a script suited to your needs.

Regardless of how differently the two scripts you've found do things, it is still quite possible to wrap them up into one function that you can call. Without knowing the specifics of what you're trying to achieve, no-one can give you advice on how to proceed.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[Wulfgen]

You could try this - it may crap out in FireFox though --

<div align="center">
  <script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0

<!-- Change the below variables to reference your own images -->
photos[0]="galleries/wood/001.jpg"
photos[1]="galleries/wood/002.jpg"

<!-- change description -->
text[0]="Wood Door 1"
text[1]="Wood Door 2"

window.onload=new Function("document.rotater.description.value=text[0]")

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of Gallery'
}

function type()
{
alert("This textbox will only display default comments")
}
</script>
  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="3"><div align="center">
      </div>        <div align="center">
        <input type=text name="description" disabled style="width:260px;border:0px dashed #white;font-size:1.70em;color:blue;font-weight:bold;font-family:trebuchet ms;text-align:center;" />
      </div>      <div align="center">
      </div></td>
      </tr>
    <tr>
      <td width="48%"><div align="center">
        <input type="button" value="<< Previous Door" name="B2" onclick="backward()" />
      </div></td>
      <td width="2%"><div align="center"></div></td>
      <td width="48%"><div align="center">
        <input type="button" value="Next Door >>" name="B1" onclick="forward()" />
      </div></td>
    </tr>
  </table>
  </div>
</form>
</td>
</tr>
</table>

 

[dcroe05]

Wulfgen,

Thanks for the code. I tried it both FF and IE and in both a got a centered text box, with two navigation buttons, but neither seemed to do anything.

Trying to understand the code, I'm not sure if "document.images.photoslider.src" was defined anywhere...

 

[trollacious]

Here's the URL of a working slideshow with caption page that I've used for a number of years.

http://nancyandlee.tripod.com

Lee

 

[dcroe05]

trollacious,

Thanks for the link. I'm saving that so I can comeback to it later.

For the time being, because the website needs to be up ASAP, I've come up with a very crude solution...but once the website is done(ish) I'm going to come back and write the page correctly.

For the time being I used this script. And while it is basically a text swap script, I realized that instead of changing text, it's actually changing the HTML inside a DIV. So right now I'm swapping an ENORMOUS block of HTML.

You can see it "working", here.

 

[Wulfgen]

In the top td you have an image called photoslider -- like this <img src="youimage.jpg" width="475" height="473" name="photoslider">

Make sure all the images are the same size....