HTML Help

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

I'm trying to create a behavior on a page where, when you rollover the thumbnail image, the image enlarges to be more easily seen. Anybody know the code for it?

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Depends on how you want it to enlarge.
Here's one way with css.
Code: <div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="thumb.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="big.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>

css
Code: #menu {
position:relative;
top:10px;
left:100px;
width:75px; /* same width as thumbnail image */
background-color:#fff;
z-index:100;
}
#menu a.p1, #menu a.p1:visited {
display:block;
width:75px; /* width of thumbnail */
height:75px; /* height of thumbnail */
text-decoration:none;
background:#fff;
top:0;
left:0;
border:0;
}
#menu a img {border:0;}
#menu a.p1:hover {
text-decoration:none;
background-color:#8c97a3;
color:#000;
}
#menu a .large {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}
#menu a.p1:hover .large {
display:block;
position:absolute;
top:0;
left:100px;
width:300px; /* wifth of large image */
height:300px; /* height of large image */
border:10px solid #ccc;
}

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

Essentially, what I want to do is to have all the images available at the bottom of the page, and when you rollover the image, an enlarged version of the picture is displayed in a layer right above it....

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Then you want something like this.

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

Yes, something like that would be great!

Is there a way to get it to where you mouseover each image, the image will display in the main frame? If that won't work, then the mouseclick would work too.

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Quote: Is there a way to get it to where you mouseover each image, the image will display in the main frame?
One of the things every forum ask is to give as much information as possible when asking for assistance. Where did the frames come from? No, that will not work if thumbnails are in one frame and you want the large image to open in another frame.

Post your code so we can see where you want this gallery to appear and explain exactly what you expect the result to be.

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

heh, sry for not being specific. Here's my code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>UWG Pictures</title>
<style type="text/css">
.uwg_style {
border: medium solid #666666;
font-family: DejaVu Sans Condensed;
font-size: medium;
background-color: #333333;
color: #b30000;
background-image: url(images/uwg_logo.jpg);
background-attachment: fixed;
}
</style>
</head>
<body style="color: white; background-color: rgb(51, 51, 51);"
alink="#c60000" link="red" vlink="#900000">
<div style="text-align: center;">
<h1 style="background-color: black;"><a
href="Underwood%20Guitars%20Home.html"><span
style="color: rgb(177, 0, 0);"><big><big>Underwood
Guitars</big></big></span></a></h1>
</div>
<table
style="text-align: left; margin-left: auto; margin-right: auto; width: 711px; height: 32px;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td
style="text-align: center; color: red; background-color: black; width: 100px;"><a
href="UGW%20Pictures.html">Pictures</a></td>
<td
style="text-align: center; color: red; background-color: black; width: 100px;"><a
href="UGW%20Contact.html">Contact
Us</a></td>
<td
style="text-align: center; color: red; background-color: black; width: 100px;"><a
href="UGW%20Links.html">Links</a></td>
<td
style="text-align: center; color: red; background-color: black; width: 100px;"><a
href="UGW%20Videos.html">Videos</a></td>
<td
style="text-align: center; color: red; background-color: black; width: 100px;"><a
href="UGW%20About.html">About
Us</a></td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div
style="position: absolute; width: 676px; left: 163px; top: 167px; height: 397px;"></div>
<table
style="width: 782px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;" alt="Four String Fretless"
src="images/4_string_fretless.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;" alt="Four String Fretless"
src="images/4_string_fretless_2.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;" alt="Four String Fretless"
src="images/4_string_fretless_3.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;" alt="Five String Bass"
src="images/5_string.jpg"></td>
<td style="text-align: center; width: 148px;">
<img style="width: 100px; height: 65px;"
alt="Five String Bass" src="images/5_string_2.jpg"></td>
</tr>
<tr>
<td style="width: 150px; text-align: center;"><img
style="width: 65px; height: 100px;" alt="Five String Bass"
src="images/5_string_fretless.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 65px; height: 100px;" alt=""
src="images/100_1426.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;"
alt="Larry shows off the thunder design guitar"
src="images/biker_larry.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;"
alt="Larry advertises Underwood Guitars"
src="images/biker_larry_2.jpg"></td>
<td style="width: 148px; text-align: center;"><img
style="width: 100px; height: 65px;"
alt="Larry performs using the Thunder design guitar"
src="images/Biker_larry_Black_Rope.jpg"></td>
</tr>
<tr>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;"
alt="KC guitar from Little Death"
src="images/KC_littledeath.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 65px; height: 100px;"
alt="KC guitar from Little Death"
src="images/KC_littledeath_2.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;" alt="Thunder Design Edition"
src="images/thunder_designs_edition_1.jpg"></td>
<td style="width: 150px; text-align: center;"><img
style="width: 100px; height: 65px;" alt="Thunder Design Edition"
src="images/thunder_designs_edition_2.jpg"></td>
<td style="width: 148px; text-align: center;"><img
style="width: 65px; height: 100px;" alt="Thunder Design Edition"
src="images/thunder_designs_edition_3.jpg"></td>
</tr>
</tbody>
</table>
<br>
<span style="color: rgb(177, 0, 0);"></span>
<div style="text-align: center;"><img
style="width: 304px; height: 164px;" alt="Underwood Guitars"
src="images/uwg_logo.jpg"><br>
<script type="text/javascript" language="javascript"
src="time.js">
</script>
</div>
</body>
</html>

yea, kompozer is a wierd program to use... can't afford dreamweaver. =\

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

one more thing...

In the page code, where it says:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

What's the difference between strict and loose.dtd?

sticks464 · Joined: 31 Dec 2006 Posts: 2631

How about this gallery?

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

Actually that might be better... so how do I put that into code?

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Use view source to see the code.
You need these files;
css file.....Save as left_right_click.css
javascript file.....Save as scroll_gallery.js
right.gif.....Save as right.gif
left.gif.....Save as left.gif
left_right_click_ie.css.....Save as left_right_click_ie.css

Or download all the files needed.

html
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" media="all" type="text/css" href="left_right_click.css" />
<script src="scroll_gallery.js" type="text/javascript"></script>

</head>

<body>
<div id="gallery">
<img class="left" src="left.gif" alt="left arrow" title="" />
<ul>
<li class="chosen th1">
   <div><i><em></em>
      <img class="start" src="image-1.jpg" title="" alt="" />
   </i></div>
   <span><b>Lorem ipsum mea.</b><br />Ut posse discere omittam, et pro maluisset evertitur incorrupte, quo modus etiam euismod ne. Id vel postulant periculis, graeco minimum no sit.</span>
</li>

<li class="th2">
   <div><i><em></em>
      <img src="image-2.jpg" title="" alt="" />
   </i></div>
   <span><b>Ne eam invidunt.</b><br /> Suavitate cotidieque, has veniam audiam senserit ad. Vocent ornatus vim eu, duo laudem ignota appetere ea.</span>
</li>
<li class="th3">

   <div><i><em></em>
      <img src="image-3.jpg" title="" alt="" />
   </i></div>
   <span><b>Mea hinc eirmod.</b><br />Petentium ex. No iisque corpora pri, vix et fugit voluptaria, discere nominati eu vel.</span>
</li>
<li class="th4">
   <div><i><em></em>
      <img src="image-4.jpg" title="" alt="" />

   </i></div>
   <span><b>At sea equidem.</b><br />Maluisset, tamquam menandri honestatis qui at.</span>
</li>
<li class="th5">
   <div><i><em></em>
      <img src="image-5.jpg" title="" alt="" />
   </i></div>
   <span><b>Ad quot aeque.</b><br />Pri nemore aliquip no eum. Ea nec temporibus delicatissimi. Regione dolores legendos id qui.</span>

</li>
<li class="th6">
   <div><i><em></em>
      <img src="image-6.jpg" title="" alt="" />
   </i></div>
   <span><b>Eu vel legimus.</b><br />Inimicus maiestatis, laoreet invidunt ut ius, usu veri suscipit no.</span>
</li>
<li class="th7">

   <div><i><em></em>
      <img src="image-7.jpg" title="" alt="" />
   </i></div>
   <span><b>Deserunt senserit.</b><br />Pro ea, ea ius unum diceret tractatos, eum maiorum albucius ex. Nonummy forensibus vel ne, nisl cotidieque pri at.</span>
</li>
<li class="hide th8">
   <div><i><em></em>
      <img src="image-8.jpg" title="" alt="" />

   </i></div>
   <span><b>Sanctus noluisse.</b><br />Interesset ad quo, vidisse graecis concludaturque in quo, idque expetendis in quo.</span>
</li>
<li class="hide th9">
   <div><i><em></em>
      <img src="image-9.jpg" title="" alt="" />
   </i></div>
   <span><b>Inani percipit.</b><br />Legendos eu sea. An fastidii voluptua has. Ei mei saperet appellantur adversarium.</span>

</li>
<li class="hide th10">
   <div><i><em></em>
      <img src="image-10.jpg" title="" alt="" />
   </i></div>
   <span><b>His ei tation.</b><br />Albucius, prima solet democritum cum no, ut numquam voluptatum nec.</span>
</li>
<li class="hide th11">

   <div><i><em></em>
      <img src="image-11.jpg" title="" alt="" />
   </i></div>
   <span><b>Ut sonet.</b><br />Adipisci ius, debet sententiae elaboraret ei est. Vis nostro consectetuer ea, no pri magna alterum.</span>
</li>
<li class="hide th12">
   <div><i><em></em>
      <img src="image-12.jpg" title="" alt="" />

   </i></div>
   <span><b>His puto mentitum.</b><br />Persequeris cu, utamur legendos id sea. Prompta vituperata qui cu. Idque postulant id mei.</span>
</li>
<li class="hide th13">
   <div><i><em></em>
      <img src="image-13.jpg" title="" alt="" />
   </i></div>
   <span><b>Affert explicari.</b><br />Ei eam, ei has vidisse petentium consetetur. Amet modus an mea, adhuc imperdiet et has.</span>

</li>
<li class="hide th14">
   <div><i><em></em>
      <img src="image-14.jpg" title="" alt="" />
   </i></div>
   <span><b>Ea has labore.</b><br />Debitis pertinax, ad vis idque impedit volutpat, id qui alterum constituto.</span>
</li>
<li class="hide th15">

   <div><i><em></em>
      <img src="image-15.jpg" title="" alt="" />
   </i></div>
   <span><b>Augue graeco.</b><br />Insolens ei vel. Eu vix nostro erroribus, duis omnis utamur est ut.</span>
</li>
</ul>
<img class="right" src="right.gif" alt="right arrow" title="" />
</div>

</body>
</html>