image text appear in form text window? [Archive]

View Full Version : image text appear in form text window?

nonna

03-27-2003, 12:31 AM

As I'm sitting here wondering how to phrase my question, what I want is right above as I type in this box.
On my site (click (http://members.optushome.com.au/donnamareeb)) I have many tiny buttons to navigate the site with. I wanted an empty box (window? text area?) above my buttons which would enter in the linked page name when a person hovers the mouse over the corresponding button. I have it at the moment displaying the text when you hover the mouse on the buttons, and I'm sick of squinting to read my own text. I wanted the text area box much like the one at mylittlechicken.com.

Is this possible to do with java as my server does not support PHP and will it also affect my mouseover image change tags?

Please be gentle with me, the last time I made a webpage was years ago and I used Netscape Gold; this type of dynamic stuff is all Greek to me :)

Thank you for your time,

Donna

Antoniohawk

03-27-2003, 04:32 AM

Hi Donna I would happy to help you out here. Would u like a text box that appears at the top of the page or above each image? If its at the top of the page, its pretty easy to do.


INPUT {
FONT-FAMILY: Verdana, Helvetica;
FONT-SIZE: 10px;
border: 1px green solid;
background-color: #000000;
}


<form>
<input id="change">
</form>

to make the text change onMouseOver of an image:

<a title="My Quilting Bee quilt!" target="I1" href="quilt.htm" onmouseover="document['fpAnimswapImgFP17'].imgRolln=document['fpAnimswapImgFP17'].src;document['fpAnimswapImgFP17'].src=document['fpAnimswapImgFP17'].lowsrc;
document.getElementById('change').value = 'My Quilting Bee quilt'"

onmouseout="document['fpAnimswapImgFP17'].src=document['fpAnimswapImgFP17'].imgRolln
; document.getElementById('change').value = '';"
>

the bold text is wat i added, just do this for every image u have. I have no idea where u want the text box that the description will appear in so u will have to put that somewhere.
P.S. the quotes in the bold on mouseout are 2 single quotes. Also if you need anymore help just post here again. :)

nonna

03-27-2003, 05:09 AM

Ohh my goodness you are wonderful!
Thank you so much!
You don't know how much I appreciate this at all.

I looked all over the Dynamic Drive site, where do they hide this stuff?
I found all sorts of other cool stuff but nothing as simple as this!

Once again thank you, you've saved me a huge headache!

Donna

nonna

03-27-2003, 09:50 AM

I've tried everything known to man and I can't get this darn thing to work.

I give up :(

Antoniohawk

03-27-2003, 09:47 PM

u were so excited, wat happened? Im still here for ya and happy to help if i can. Wats the problem? The first half of the code for the page is below its all been changed so you dont have to do it. :)
P.S. I changed the width of the iframe (originally 801), i also suggest changing the height of it too, this way no1 will have to scroll down, which really annoys some people. If you need any help please ask.

<html>

<head>
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>sheep sanctuary</title>
<script language="JavaScript" fptype="dynamicanimation">

</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
INPUT {
FONT-FAMILY: Verdana, Helvetica;
FONT-SIZE: 10px;
border: 1px white solid;
background-color: #ffffff;
}
</style>
</head>

<body link="#000080" vlink="#0000FF" alink="#FF0000" onload="dynAnimation()" background="back_05.gif">

<p align="center" dynamicanimation="fpAnimwaveWordsFP1" id="fpAnimwaveWordsFP1" style="position: relative !important; visibility: hidden" language="Javascript1.2">
<blink>
<b><font face="Verdana" color="#3399FF" size="2">the sheep sanctuary</font></b></blink></p>

<p align="center">

<form>
<input id="change">
</form>
</p>

<p align="center">
<iframe name="I1" width="720" height="452" src="welcome.htm" align="left">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

<a title="About me!" target="I1" href="me.htm" onmouseover="document['fpAnimswapImgFP15'].imgRolln=document['fpAnimswapImgFP15'].src;document['fpAnimswapImgFP15'].src=document['fpAnimswapImgFP15'].lowsrc; document.getElementById('change').value = 'About me!'" onmouseout="document['fpAnimswapImgFP15'].src=document['fpAnimswapImgFP15'].imgRolln; document.getElementById('change').value = '';">
<img border="0" src="aboutme.gif" id="fpAnimswapImgFP15" name="fpAnimswapImgFP15" dynamicanimation="fpAnimswapImgFP15" lowsrc="aboutme-animated.gif" width="25" height="25"></a>
<a onmouseover="document['fpAnimswapImgFP44'].imgRolln=document['fpAnimswapImgFP44'].src;document['fpAnimswapImgFP44'].src=document['fpAnimswapImgFP44'].lowsrc; document.getElementById('change').value = 'sheep? why?'" onmouseout="document['fpAnimswapImgFP44'].src=document['fpAnimswapImgFP44'].imgRolln; document.getElementById('change').value = '';" title="sheep? why?" target="I1" href="sheep.htm">
<img border="0" src="sheepbutt.gif" id="fpAnimswapImgFP44" name="fpAnimswapImgFP44" dynamicanimation="fpAnimswapImgFP44" lowsrc="sheepbutt-animated.gif" width="25" height="25"></a></p>

<p align="center">

<a title="My Quilting Bee quilt!" target="I1" href="quilt.htm" onmouseover="document['fpAnimswapImgFP17'].imgRolln=document['fpAnimswapImgFP17'].src;document['fpAnimswapImgFP17'].src=document['fpAnimswapImgFP17'].lowsrc; document.getElementById('change').value = 'My Quilting Bee quilt'" onmouseout="document['fpAnimswapImgFP17'].src=document['fpAnimswapImgFP17'].imgRolln; document.getElementById('change').value = '';">
<img border="0" src="myquilt.gif" id="fpAnimswapImgFP17" name="fpAnimswapImgFP17" dynamicanimation="fpAnimswapImgFP17" lowsrc="myquilt-animated.gif" width="25" height="25"></a>
<a title="Pill Pals!" target="I1" href="pillpals.htm" onmouseover="document['fpAnimswapImgFP18'].imgRolln=document['fpAnimswapImgFP18'].src;document['fpAnimswapImgFP18'].src=document['fpAnimswapImgFP18'].lowsrc; document.getElementById('change').value = 'Pill Pals!'" onmouseout="document['fpAnimswapImgFP18'].src=document['fpAnimswapImgFP18'].imgRolln; document.getElementById('change').value = '';">
<img border="0" src="pillpals.gif" id="fpAnimswapImgFP18" name="fpAnimswapImgFP18" dynamicanimation="fpAnimswapImgFP18" lowsrc="pillpals-animated.gif" width="25" height="25"></a></p>

<p align="center">

<a onmouseover="document['fpAnimswapImgFP19'].imgRolln=document['fpAnimswapImgFP19'].src;document['fpAnimswapImgFP19'].src=document['fpAnimswapImgFP19'].lowsrc; document.getElementById('change').value = 'my pixel cams!'" onmouseout="document['fpAnimswapImgFP19'].src=document['fpAnimswapImgFP19'].imgRolln; document.getElementById('change').value = '';" title="my pixel cams!" target="I1" href="pixelcam.htm">
<img border="0" src="pixelcam.gif" id="fpAnimswapImgFP19" name="fpAnimswapImgFP19" dynamicanimation="fpAnimswapImgFP19" lowsrc="pixelcam-animated.gif" width="25" height="25"></a>
<a title="pixel train" target="I1" href="pixeltrain.htm" onmouseover="document['fpAnimswapImgFP48'].imgRolln=document['fpAnimswapImgFP48'].src;document['fpAnimswapImgFP48'].src=document['fpAnimswapImgFP48'].lowsrc; document.getElementById('change').value = 'pixel train'" onmouseout="document['fpAnimswapImgFP48'].src=document['fpAnimswapImgFP48'].imgRolln; document.getElementById('change').value = '';">
<img border="0" src="pixeltrain.gif" id="fpAnimswapImgFP48" name="fpAnimswapImgFP48" dynamicanimation="fpAnimswapImgFP48" lowsrc="pixeltrain-animated.gif" width="25" height="25"></a></p>

<p align="center">

Antoniohawk

03-27-2003, 10:20 PM

nonna

03-28-2003, 12:27 AM

Ohh thank you so much for doing that. I didn't know where the code went, what I was changing and where my animated on mouseover went!

I get frustrated easily with java, it's just complicated to me. I don't use Dreamweaver at all, just basic Front Page. I went looking and looking to find somewhere that would tell me where to insert the script and finally at about midnight last night I gave up and sighed.

You are an absolute goodness for posting that for me, so I don't have to change anything. I feel that at my age, I should at least know SOME of this stuff and I feel a bit ashamed that I don't!

I could kiss you! Thankyou for setting it out so I can just cut and paste, you're the best!! :)