CodingForums.com - Need a linked text box

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Need a linked text box (http://www.codingforums.com/showthread.php?t=283238)

Need a linked text box

So im trying to get a linked text box in my photogallery.
I want it linked to each picture so i can put a different description for each one.
I have not done this kind of coding in a long time, so i don't know if i had to have a
div tag for each photo or not.

I was hoping to get the information box under the big picture viewer. Thanks for the help in advance.
Also, I am not a expert in java, so I dont know if that code is the best I have for my set up or not,
or if it is a messy code, so sorry about that if that is going to cause issues.

Here is my coding...
INDEX code

Code:

<html>



<body>



 

<div id="gallery">

    <div id="thumbs">

        <a href="javascript: changeImage(1);"><img src="images/RS1.png" alt="" /></a>

        <a href="javascript: changeImage(2);"><img src="images/RS2.png" alt="" /></a>

        <a href="javascript: changeImage(3);"><img src="images/SW1.png" alt="" /></a>

        

    </div>

 </div>

</div>

    <div id="bigimages">

        <div id="normal1">

            <img src="images/bigimage1.jpg" alt=""/>

        </div>

 

        <div id="normal2">

            <img src="images/bigimage2.jpg" alt=""/>

        </div>

 

        <div id="normal3">

            <img src="images/bigimage3.jpg" alt=""/>

        </div>

 

        <div id="normal4">

            <img src="images/bigimage4.png" alt=""/>

        </div>

 

        <div id="normal5">

            <img src="images/bigimage5.png" alt=""/>

        </div>

    </div>

</div>



</body>

</html>

Javascript code:

Code:



function changeImage(current) {

        var imagesNumber = 5;

        

        for (i=1; i<=imagesNumber; i++) {        

                if (i == current) {

                        document.getElementById("normal" + current).style.display = "block";

                } else {

                        document.getElementById("normal" + i).style.display = "none";

                }

        }

}

and CSS code:

Code:

body {

        margin: 0;

        padding: 0;

        background: #222;

        color: #EEE;

        text-align: center;

        font: normal 9pt Verdana;

}

a:link, a:visited { 

        color: #EEE; 

}

img {

        border: none;

}

#normal2, #normal3, #normal4, #normal5 {

        display: none;

}

#gallery {

        margin: 0 auto;

        width: 800px;

}

#thumbs {

        margin: 10px auto 10px auto;

        text-align: center;

        width: 800px;

}

#bigimages {

        width: 770px;

        float: canter;

}

#thumbs img {

        width: 130px;

        height: 130px;

}

#bigimages img {

        border: 4px solid #555;

        margin-top: 5px;

        width: 750px;

}

#thumbs a:link, #thumbs a:visited {

        width: 130px;

        height: 130px;

        border: 6px solid #555;

        margin: 6px;

        float: left;

}

#thumbs a:hover {

        border: 6px solid #888;

}

For use of an old (but wonderful) JavaScriptKit slideshow, see http://www.jacquimorgan.com . And as noted see

/* Flexible Image Slideshow- by JavaScriptKit.com (http://www.javascriptkit.com)
For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ This notice must stay intact for use */

/*see forum http://www.codingforums.com/showthread.php?t=143543 for adding caption/title August08 and onMouseOver PAUSE Aug08*/

http://www.javascriptkit.com/script/...bleslide.shtml

In another instance, used innerHTML.

Quote:

Originally Posted by waxdoc (Post 1296008)

Not quite what I'm looking for. I want to keep the format as I have it, but just add a description box under the main picture viewer

Thanks for the helpful links, but that is not quite what I am looking for.
I need to keep the format the same as I have it. Not a slideshow, I'm
just looking to put a description box under the main picture viewer. I still
have not been able to get this working yet. Once again, thanks in advance for all
the help.

Mac

Edit: New question comes to mind... Is this something that can even be done in HTML,
or is it something that needs to be written in Java or my CSS? Thanks in advance for
answering my question.

JavaScript is not JAVA. It would be helpful if you can give online example of your page. Now noting your "thumbnail" code, wonder if subsequent page at http://www.jacquimorgan.com/hist/index.html might be closer to your requirements. The code used is outdated and messy, but basically used innerHTML -- which is not an "elegant" solution. I'm not a JavaScript pro; hopefully one will step forward.

Code:

<div id="thumbnails">



<a href="#nogo" onclick="javascript:loadpage('03_CalendarScottPrinting.jpg')" 

onMouseOver="MGOn('MG1'); document.getElementById('text').innerHTML ='Scott Printing Calendar'" title="Scott Printing Calendar">   

        <img name="1" alt="Scott Printing calendar" src="03_CalendarScottPrinting.jpg"  title="Scott Printing Calendar" /></a>



<a href="#"  onclick="javascript:loadpage('04_ManGoat.jpg')" 

onMouseOver="MGOn('MG2'); document.getElementById('text').innerHTML ='American Artist Cover art'" title="American Artist Cover art"> 



     <img name="2" alt="American Artist Cover art" src="04_ManGoat.jpg" title="American Artist Cover art" /></a>

The HTML, as follows, uses the TEXT id referenced in document.getElementById('text').innerHTML ='__'

Code:

<div id="space" class="scaler">

<img src="04_AmericanArtist.jpg" alt="MGholder" id="MGholder" name="MGholder" hspace=0 vspace=0 border=1 class="MGholder" /> 

<br />

<p id="text"> American Artist cover</p>

</div> <!--closeSPACE-->

Here is a screen shot of what is looks like. This is not live on a site yet.
http://i45.photobucket.com/albums/f9...screenshot.png
The thumbnails are clickable, bringing up a large image in the main viewer.

Quote:

Originally Posted by waxdoc (Post 1296305)

Code:

<div id="thumbnails">



<a href="#nogo" onclick="javascript:loadpage('03_CalendarScottPrinting.jpg')" 

onMouseOver="MGOn('MG1'); document.getElementById('text').innerHTML ='Scott Printing Calendar'" title="Scott Printing Calendar">   

        <img name="1" alt="Scott Printing calendar" src="03_CalendarScottPrinting.jpg"  title="Scott Printing Calendar" /></a>



<a href="#"  onclick="javascript:loadpage('04_ManGoat.jpg')" 

onMouseOver="MGOn('MG2'); document.getElementById('text').innerHTML ='American Artist Cover art'" title="American Artist Cover art"> 



     <img name="2" alt="American Artist Cover art" src="04_ManGoat.jpg" title="American Artist Cover art" /></a>

The HTML, as follows, uses the TEXT id referenced in document.getElementById('text').innerHTML ='__'

Code:

<div id="space" class="scaler">

<img src="04_AmericanArtist.jpg" alt="MGholder" id="MGholder" name="MGholder" hspace=0 vspace=0 border=1 class="MGholder" /> 

<br />

<p id="text"> American Artist cover</p>

</div> <!--closeSPACE-->

Do I have to change my other coding to support this code? Reason I ask is because just a copy paste is not working.

Ok, I got it! Thank you so much for you help waxdoc! When It is up ill post a link :D