Large Text box linked to an image(s) via mouseover

[japonica]

Hi,
I have several pictures on my web page. When I mouse over them, I want a seperate text box to appear with a description. And not 2 words - several paragraphs. I've no idea about code, so I'm looking for a software program that will generate the HTML and files for pasting into coffeecup visual designer. Flash - whatever.
There are plenty of programs, but the main problem is finding a program where I can set the position of the text box on the page. The pictures will be arranged in a grid, with the fixed text box to the right of it, always in the same position. The other problem I have is getting a program that takes more than one line for the text. I'm desperate (ok - no pop-up windows) - but I'll even accept no mouseover, but a mouse click to access the 'hidden' text. That is, as long as all this can be achieved on the one web page.

[Nile]

I dont think this is the most effecient way but give it a try:

<style type="text/css">
div#text {
background-color: lightgreen;
border: 1px solid green;
width: 300px;
height: 400px;
}
</style>
<script type="text/javascript">
var info = new Array();
info['1'] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper odio ac tortor auctor consequat. Sed aliquet varius tortor ut vehicula. Mauris lacus arcu, gravida quis vulputate eleifend, vulputate sit amet risus. In et nibh at justo sodales dapibus. Suspendisse gravida vulputate sagittis. Curabitur dignissim lobortis ultricies. Proin scelerisque lorem orci, sed volutpat ligula. Integer suscipit, sem sed varius aliquet, arcu nunc ultrices velit, ut iaculis urna nisi nec urna. Cras vitae est placerat odio ornare commodo ullamcorper ac lectus. Curabitur ac lacus non eros ultrices ultricies eu id velit. In vitae faucibus sem. Mauris et ante magna, et mollis mauris. Donec condimentum dignissim ipsum, dignissim fringilla velit feugiat ac. Praesent at leo sit amet purus vehicula commodo a nec orci. Donec ut feugiat sem. Integer lorem enim, semper eu hendrerit id, accumsan sed nisl. Duis pretium bibendum ante et elementum. ";
info['2'] = "In sit amet dolor non urna vulputate rutrum vehicula in quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut at elit felis, id feugiat lorem. Quisque risus erat, aliquet vitae fringilla non, tempor ut ante. Donec eu tortor justo, mollis porttitor sapien. In ac libero vulputate tortor porta fringilla. Vivamus ligula erat, scelerisque bibendum rhoncus quis, tristique quis dolor. Curabitur laoreet molestie dui vehicula suscipit. Ut non aliquam diam. Curabitur eget purus ut risus porttitor hendrerit. Curabitur fringilla felis non mi condimentum consequat. Ut non feugiat nisi. Praesent laoreet fermentum metus, consequat tincidunt tellus posuere eu. Nulla tortor nibh, sodales sed vestibulum non, lacinia rhoncus lorem. Fusce pretium lacus sit amet mauris luctus euismod. ";
info['3'] = "Quisque ligula orci, luctus nec pellentesque ac, sodales id arcu. Vivamus eros neque, vehicula in venenatis ut, sollicitudin fringilla odio. Sed congue feugiat rhoncus. In eu velit ipsum, in pretium urna. Fusce vel facilisis dui. Mauris ultricies neque a ipsum vehicula non faucibus nunc posuere. Phasellus ultricies, purus et cursus tincidunt, libero mauris eleifend nisl, in convallis diam odio in nunc. In ut nulla nulla. Proin ut est urna. Nulla facilisi. Donec pellentesque pellentesque porta. Cras adipiscing rutrum egestas. Vivamus volutpat elit ut ligula tempus semper. Pellentesque placerat mauris et massa consequat non laoreet ligula tempor. Aliquam blandit eros vel quam faucibus a sagittis mi dapibus. Nam in magna non magna hendrerit egestas at ac massa. Nulla orci sapien, laoreet eu gravida ut, tincidunt sit amet odio. Integer vel lacus eu justo bibendum sollicitudin. ";
var text = document.getElementById('inner');
var editText = function(me){
if(text){
document.getElementById("text").removeChild(text);}
text = document.createElement("div");
text.appendChild(document.createTextNode(info[me.getAttribute('rel')]));
document.getElementById("text").appendChild(text);
};
</script>
<div id="imgA">
<img src="http://beta.network2.tv/channelimg/Hound_TV_-_A_video_podcast_for_dogs_and_their_owners.png" rel="1" onmouseover="editText(this)"/>

<img src="http://beta.network2.tv/channelimg/Hound_TV_-_A_video_podcast_for_dogs_and_their_owners.png" rel="2" onmouseover="editText(this)"/>

<img src="http://beta.network2.tv/channelimg/Hound_TV_-_A_video_podcast_for_dogs_and_their_owners.png" rel="3" onmouseover="editText(this)"/>
</div>
<div id="text">
<div id="inner">

</div>
</div>

[japonica]

Dude - that was most awesome. Even worked. Only problem is that my programming skills are nil. What I really need, is a graphical interface program, that I can modify to taste, to generate positionable text boxes, linked to images through mouse over action.

For example, to build a toolbar is no problem (SoThink, UltraMenu). Everything is done graphically, then I just paste the generated HTML into my coffeecup website builder (along with the .gif and .js).

But for this application, there is very little available.
http://www.flashcomponents.net/component/ultimate_advanced_tooltip_03.html
http://wareseeker.com/screenshot/javascript-mouseover-creator-2.0.exe/368459

I need a graphical ‘desktop’ with complete freedom of text box position, box (text) size, color, background, and a publishing facility (ie. Idiot proof). Nothing combines all these features. Maybe I’m looking in the wrong place? I’m searching for ‘mouse over effects’, ‘tooltips’ ‘flash/DHTML roll overs’, etc.

However I’m not hopeful, so I’ll follow your helpful example and see where the script route leads me…….

[Nile]

Ok, tell me if you need help. (Do you want a tooltip? or an information box that doesnt relate to your cursor?)
If so try this:
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

[japonica]

Thanks again. That site is still a bit off. I can't understand why there no graphical interface programs for generating the code(?)
Here is what I'm trying to do;

http://otkrit.hostei.com/do_not_delete/mouseover.jpg

I have a grid of n images. Upon mouseover of each image, I want a text box to appear, with a description (maybe 2 large paragraphs). The Text box is in a fixed position, independent of the images. The image array is also located at an absolute position and is sizeable (this will give me flexibility to change the array size, and the text box location. As variables, I want also
• Text box width and height
• Text font and size and justification (even)
• Relative path to image [folder] for mouseover link
• Text Box color and border
• The ability to alter the shape and size of the image grid, (and separation between images). Images will be equal sized.
• The images must also hyperlink upon mouse-CLICK.

These sites give some idea of the effect;

http://www.cssplay.co.uk/menu/balloons
http://www.technology-management.us/

[Nile]

This is the closest I can get:

PART 1


<style type="text/css">
div.images div.row {
clear: both;
margin: 1px;
padding: 1px;
min-height: 45px;
float: left;
display: block;
}
div.images div.row div.image {
border: 1px solid #D8D6CF;
margin: 2px;
width: 59px;
height: 59px;
text-align: center;
float: left;
}
div #text {
width: 700px;
height: 250px;
font-size: 14px;
}
</style>
<script type="text/javascript">
var info = new Array();

info['1'] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper odio ac tortor auctor consequat. Sed aliquet varius tortor ut vehicula. Mauris lacus arcu, gravida quis vulputate eleifend, vulputate sit amet risus. In et nibh at justo sodales dapibus. Suspendisse gravida vulputate sagittis. Curabitur dignissim lobortis ultricies. Proin scelerisque lorem orci, sed volutpat ligula. Integer suscipit, sem sed varius aliquet, arcu nunc ultrices velit, ut iaculis urna nisi nec urna. Cras vitae est placerat odio ornare commodo ullamcorper ac lectus. Curabitur ac lacus non eros ultrices ultricies eu id velit. In vitae faucibus sem. Mauris et ante magna, et mollis mauris. Donec condimentum dignissim ipsum, dignissim fringilla velit feugiat ac. Praesent at leo sit amet purus vehicula commodo a nec orci. Donec ut feugiat sem. Integer lorem enim, semper eu hendrerit id, accumsan sed nisl. Duis pretium bibendum ante et elementum. ";

info['2'] = "In sit amet dolor non urna vulputate rutrum vehicula in quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut at elit felis, id feugiat lorem. Quisque risus erat, aliquet vitae fringilla non, tempor ut ante. Donec eu tortor justo, mollis porttitor sapien. In ac libero vulputate tortor porta fringilla. Vivamus ligula erat, scelerisque bibendum rhoncus quis, tristique quis dolor. Curabitur laoreet molestie dui vehicula suscipit. Ut non aliquam diam. Curabitur eget purus ut risus porttitor hendrerit. Curabitur fringilla felis non mi condimentum consequat. Ut non feugiat nisi. Praesent laoreet fermentum metus, consequat tincidunt tellus posuere eu. Nulla tortor nibh, sodales sed vestibulum non, lacinia rhoncus lorem. Fusce pretium lacus sit amet mauris luctus euismod. ";

info['3'] = "Quisque ligula orci, luctus nec pellentesque ac, sodales id arcu. Vivamus eros neque, vehicula in venenatis ut, sollicitudin fringilla odio. Sed congue feugiat rhoncus. In eu velit ipsum, in pretium urna. Fusce vel facilisis dui. Mauris ultricies neque a ipsum vehicula non faucibus nunc posuere. Phasellus ultricies, purus et cursus tincidunt, libero mauris eleifend nisl, in convallis diam odio in nunc. In ut nulla nulla. Proin ut est urna. Nulla facilisi. Donec pellentesque pellentesque porta. Cras adipiscing rutrum egestas. Vivamus volutpat elit ut ligula tempus semper. Pellentesque placerat mauris et massa consequat non laoreet ligula tempor. Aliquam blandit eros vel quam faucibus a sagittis mi dapibus. Nam in magna non magna hendrerit egestas at ac massa. Nulla orci sapien, laoreet eu gravida ut, tincidunt sit amet odio. Integer vel lacus eu justo bibendum sollicitudin. ";

info['4'] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper odio ac tortor auctor consequat. Sed aliquet varius tortor ut vehicula. Mauris lacus arcu, gravida quis vulputate eleifend, vulputate sit amet risus. In et nibh at justo sodales dapibus. Suspendisse gravida vulputate sagittis. Curabitur dignissim lobortis ultricies. Proin scelerisque lorem orci, sed volutpat ligula. Integer suscipit, sem sed varius aliquet, arcu nunc ultrices velit, ut iaculis urna nisi nec urna. Cras vitae est placerat odio ornare commodo ullamcorper ac lectus. Curabitur ac lacus non eros ultrices ultricies eu id velit. In vitae faucibus sem. Mauris et ante magna, et mollis mauris. Donec condimentum dignissim ipsum, dignissim fringilla velit feugiat ac. Praesent at leo sit amet purus vehicula commodo a nec orci. Donec ut feugiat sem. Integer lorem enim, semper eu hendrerit id, accumsan sed nisl. Duis pretium bibendum ante et elementum. ";

info['5'] = "In sit amet dolor non urna vulputate rutrum vehicula in quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut at elit felis, id feugiat lorem. Quisque risus erat, aliquet vitae fringilla non, tempor ut ante. Donec eu tortor justo, mollis porttitor sapien. In ac libero vulputate tortor porta fringilla. Vivamus ligula erat, scelerisque bibendum rhoncus quis, tristique quis dolor. Curabitur laoreet molestie dui vehicula suscipit. Ut non aliquam diam. Curabitur eget purus ut risus porttitor hendrerit. Curabitur fringilla felis non mi condimentum consequat. Ut non feugiat nisi. Praesent laoreet fermentum metus, consequat tincidunt tellus posuere eu. Nulla tortor nibh, sodales sed vestibulum non, lacinia rhoncus lorem. Fusce pretium lacus sit amet mauris luctus euismod. ";

info['6'] = "Quisque ligula orci, luctus nec pellentesque ac, sodales id arcu. Vivamus eros neque, vehicula in venenatis ut, sollicitudin fringilla odio. Sed congue feugiat rhoncus. In eu velit ipsum, in pretium urna. Fusce vel facilisis dui. Mauris ultricies neque a ipsum vehicula non faucibus nunc posuere. Phasellus ultricies, purus et cursus tincidunt, libero mauris eleifend nisl, in convallis diam odio in nunc. In ut nulla nulla. Proin ut est urna. Nulla facilisi. Donec pellentesque pellentesque porta. Cras adipiscing rutrum egestas. Vivamus volutpat elit ut ligula tempus semper. Pellentesque placerat mauris et massa consequat non laoreet ligula tempor. Aliquam blandit eros vel quam faucibus a sagittis mi dapibus. Nam in magna non magna hendrerit egestas at ac massa. Nulla orci sapien, laoreet eu gravida ut, tincidunt sit amet odio. Integer vel lacus eu justo bibendum sollicitudin. ";

info['7'] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper odio ac tortor auctor consequat. Sed aliquet varius tortor ut vehicula. Mauris lacus arcu, gravida quis vulputate eleifend, vulputate sit amet risus. In et nibh at justo sodales dapibus. Suspendisse gravida vulputate sagittis. Curabitur dignissim lobortis ultricies. Proin scelerisque lorem orci, sed volutpat ligula. Integer suscipit, sem sed varius aliquet, arcu nunc ultrices velit, ut iaculis urna nisi nec urna. Cras vitae est placerat odio ornare commodo ullamcorper ac lectus. Curabitur ac lacus non eros ultrices ultricies eu id velit. In vitae faucibus sem. Mauris et ante magna, et mollis mauris. Donec condimentum dignissim ipsum, dignissim fringilla velit feugiat ac. Praesent at leo sit amet purus vehicula commodo a nec orci. Donec ut feugiat sem. Integer lorem enim, semper eu hendrerit id, accumsan sed nisl. Duis pretium bibendum ante et elementum. ";

[Nile]

PART 2

info['8'] = "In sit amet dolor non urna vulputate rutrum vehicula in quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut at elit felis, id feugiat lorem. Quisque risus erat, aliquet vitae fringilla non, tempor ut ante. Donec eu tortor justo, mollis porttitor sapien. In ac libero vulputate tortor porta fringilla. Vivamus ligula erat, scelerisque bibendum rhoncus quis, tristique quis dolor. Curabitur laoreet molestie dui vehicula suscipit. Ut non aliquam diam. Curabitur eget purus ut risus porttitor hendrerit. Curabitur fringilla felis non mi condimentum consequat. Ut non feugiat nisi. Praesent laoreet fermentum metus, consequat tincidunt tellus posuere eu. Nulla tortor nibh, sodales sed vestibulum non, lacinia rhoncus lorem. Fusce pretium lacus sit amet mauris luctus euismod. ";

info['9'] = "Quisque ligula orci, luctus nec pellentesque ac, sodales id arcu. Vivamus eros neque, vehicula in venenatis ut, sollicitudin fringilla odio. Sed congue feugiat rhoncus. In eu velit ipsum, in pretium urna. Fusce vel facilisis dui. Mauris ultricies neque a ipsum vehicula non faucibus nunc posuere. Phasellus ultricies, purus et cursus tincidunt, libero mauris eleifend nisl, in convallis diam odio in nunc. In ut nulla nulla. Proin ut est urna. Nulla facilisi. Donec pellentesque pellentesque porta. Cras adipiscing rutrum egestas. Vivamus volutpat elit ut ligula tempus semper. Pellentesque placerat mauris et massa consequat non laoreet ligula tempor. Aliquam blandit eros vel quam faucibus a sagittis mi dapibus. Nam in magna non magna hendrerit egestas at ac massa. Nulla orci sapien, laoreet eu gravida ut, tincidunt sit amet odio. Integer vel lacus eu justo bibendum sollicitudin. ";

var text = document.getElementById('inner');
var editText = function(me){
if(text){
document.getElementById("text").removeChild(text);
}
text = document.createElement("div");
text.appendChild(document.createTextNode(info[me.getAttribute('rel')]));
document.getElementById("text").appendChild(text);
};
</script>

<div class="images">
<div class="row">
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="1" onmouseover="editText(this)" />
</div>
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="2" onmouseover="editText(this)" />
</div>
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="3" onmouseover="editText(this)" />
</div>
</div>

<div class="row">
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="4" onmouseover="editText(this)" />
</div>
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="5" onmouseover="editText(this)" />
</div>
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="6" onmouseover="editText(this)" />
</div>
</div>
<div class="row">
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="7" onmouseover="editText(this)" />
</div>
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="8" onmouseover="editText(this)" />
</div>
<div class="image"><img src="http://www.bankhousekennelsandcattery.co.uk/images/2_about-us-p1.jpg" rel="9" onmouseover="editText(this)" />
</div>
</div>
<div id="text">
<div id="inner">

</div>
</div>
</div>

[japonica]

that's great - thanks a lot for that. It will take me a while to understand and tweak it, but that's spot on.

For anyone else interested, I found a 2nd way - that is Virtual Mechanics Site Spinner V2.7 graphical site builder. They have a WYSIWYG mouse over facility that does exactly what I have specificed (but with 20 times the code, so not so efficient). Coffecup visual site builder (V5.8) lacks this facilty.

Regards

[blackes56]

Nile, thanks for the code, it's fantastic.

How would I add a default text if none of the info [i] are being displayed?

Also, how can I make the info [i] and the default text in question be html code so I can style different parts of it and perhaps put a picture?

Thanks so much in advance.