...

View Full Version : Need a linked text box



attackmac
11-29-2012, 06:11 PM
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



<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:




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:



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;
}

waxdoc
11-30-2012, 01:21 AM
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/script2/flexibleslide.shtml

In another instance, used innerHTML.

attackmac
11-30-2012, 04:52 PM
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/script2/flexibleslide.shtml

In another instance, used innerHTML.

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

attackmac
11-30-2012, 07:35 PM
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.

waxdoc
11-30-2012, 11:55 PM
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.



<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 ='__'


<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-->

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

attackmac
12-03-2012, 08:10 PM
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.



<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 ='__'


<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.

attackmac
12-04-2012, 01:18 AM
Ok, I got it! Thank you so much for you help waxdoc! When It is up ill post a link :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum