So i have this gallery with javascript and i need to enter descriptions

Question

Mitchell_1 0 Newbie Poster

9 Years Ago

I have this gallery any help on how to enter text under each image that is moused over, i want the text to be written under the big centred image? I have the whole website attached
Thanks in advance

<DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>
        <link rel="stylesheet" type="text/css" href="../css/style.css"/>
        <style>
            img {border:1px solid #7f7f7f;}
            .thumb {margin-right:4px;}
        </style>
        <script type="text/javascript">

        function showsubmenu()
        {
            document.getElementById("submenu").style.visibility = "visible";
            document.getElementById("submenu").style.position = "absolute";

        }

        function hidesubmenu()
        {
            document.getElementById("submenu").style.visibility = "hidden";

        }

        </script>

    </head>
    <body>
        <div id="outer">

            <div id="header">
                <img src="../images/logo.jpg"/>
            </div>

            <div id="menu">
            <table align="center" id="menu2">
                        <tr>
                            <td valign="top"><a href="../index.html"><b>Home</b></a></td>
                            <td valign="top" onmouseover="showsubmenu()" onmouseout="hidesubmenu()"><a href="#" >About Us</a>
                                <table id="submenu" style="visibility:hidden" width="150">
                                    <tr>
                                        <td><a href="company.html"><b>Our Company</b></a><br/></td>
                                    </tr>
                                    <tr>
                                        <td><a href="overview.html"><b>Overview</b></a></td>
                                    </tr>
                                </table>
                            </td>
                            <td valign="top"><a href="gallery.html"><b>Gallery</b></a></td>
                            <td valign="top"><a href="subscribe.html"><b>Subscribe</b></a></td>
                            <td valign="top"><a href="contactus.html"><b>Contact Us</b></a></td>


                        </tr>
            </table>
            </div>
            <div id="content">

                <h1>Box Office Hits</h1>

                <br>
                <img class="thumb" id="blue" src="../images/blue.jpg" width="200" height="150" onmouseover="prev('blue')"/>
                <img class="thumb" id="red" src="../images/red.jpg" width="200" height="150" onmouseover="prev('red')"/>
                <img class="thumb" id="white" src="../images/white.jpg" width="200" height="150" onmouseover="prev('white')"/>
                <img class="thumb" id="yellow" src="../images/yellow.jpg" width="200" height="150" onmouseover="prev('yellow')"/>
                <img class="thumb" id="green" src="../images/green.jpg" width="200" height="150" onmouseover="prev('green')"/>
                <img class="thumb" id="violet" src="../images/violet.jpg" width="200" height="150" onmouseover="prev('violet')"/>
                <br>
                <br>
                <br>

                <div id ="image">
                <img id="preview" src="../images/blue.jpg" width="500" height="300" /><br />
                <p>When Tony Stark (Robert Downey Jr.) jump-starts a dormant peacekeeping program, things go terribly awry, forcing him, Thor (Chris Hemsworth), 
                the Incredible Hulk (Mark Ruffalo) and the rest of the Avengers to reassemble. As the fate of Earth hangs in the balance, 
                the team is put to the ultimate test as they battle Ultron, a technological terror hell-bent on human extinction. Along the way, 
                they encounter two mysterious and powerful newcomers, Pietro and Wanda Maximoff. </p>
                </div>

            <script> 
                function prev(color){
                document.getElementById('preview').src="../images/"+color+".jpg";
                }
            </script>
            </div>

            <div class ="footer">

            <button id="button" type="button"
            onclick="document.getElementById('demo').innerHTML = Date()">
            Click me to display Date and Time.</button>
            <p>Designed by Mitchell Pisani</p>

            <p id="demo"></p>
            </div>

        </div>
        </body>
</html>

javascript

Edited 9 Years Ago by Mitchell_1

3 Contributors
4 Replies
283 Views
1 Day Discussion Span
Latest Post 9 Years Ago Latest Post by Mitchell_1

JerrimePatient 5 Junior Poster in Training

9 Years Ago

start in line 62, change it to.

<div class="img-con">
    <div class="img-pic">
        <img class="thumb" src="../images1.jpg" width="200" height="150">
    </div>
    <div class="img-desc">
        <p>Some Description.</p>
    </div>
</div>
<div class="img-con">
    <div class="img-pic">
        <img class="thumb" src="../images2.jpg" width="200" height="150">
    </div>
    <div class="img-desc">
        <p>Some Description.</p>
    </div>
</div>
<div class="img-con">
    <div class="img-pic">
        <img class="thumb" src="../images3.jpg" width="200" height="150">
    </div>
    <div class="img-desc">
        <p>Some Description.</p>
    </div>
</div>
<div class="img-con">
    <div class="img-pic">
        <img class="thumb" src="../images4.jpg" width="200" height="150">
    </div>
    <div class="img-desc">
        <p>Some Description.</p>
    </div>
</div>
<div class="img-con">
    <div class="img-pic">
        <img class="thumb" src="../images5.jpg" width="200" height="150">
    </div>
    <div class="img-desc">
        <p>Some Description.</p>
    </div>
</div>
<div class="img-con">
    <div class="img-pic">
        <img class="thumb" src="../images6.jpg" width="200" height="150">
    </div>
    <div class="img-desc">
        <p>Some Description.</p>
    </div>
</div>

try it.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Mitchell_1 0 Newbie Poster · Answer 1 · 2015-05-13T12:08:21+00:00

No this doesn't work when i put the images in the div, the div disables the roll over functionality of the gallery + i want the description to show when i hover over the respective imagesand for each one to have different text that shows under the big image.
Thanks for responding by the way I'll be very grateful if someone helps me solve this problem

gentlemedia 803 Master Poster · Answer 2 · 2015-05-13T14:04:19+00:00

EDIT: Actually... ignore the below, I was too quick with my answer, because I see now you're totally after something else :)

But @JerrimePatient pointed you in the right direction, because we don't need JavaScript anymore for this. Actually already for a loooong time.

We can do this 'on mouseover reveal desciption' pure with CSS and with some nice anmiations if you want.

Example HTML:

<figure>
  <img src="yourimage.jpg" alt="" />
  <figcaption>your description</figcaption>
</figure>

Example CSS:

figure { position: relative }

figcaption {
  position: absolute;
  width: 90%;
  bottom: 0;
  left: 0;
  padding: 5px 5%;
  background-color: black;
  color: white;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

figure:hover figcaption,
figure:focus figcaption { opacity: 1 }

Demo: http://cssdeck.com/labs/full/snwgrxxk

Mitchell_1 0 Newbie Poster · Answer 3 · 2015-05-13T21:12:04+00:00

Mitchell_1 0 Newbie Poster

9 Years Ago

Any helps guys?