Hi there... I am trying to create a website where you have buttons horizontally that when clicked a large image appears below them in the same browser window. This image will change according to what button is clicked above. I set up my web page in tables, was I to use frames?
I am trying to create a website where you have buttons horizontally that when clicked a large image appears below them in the same browser window. This image will change according to what button is clicked above.
Depends on what it is that you want to do. Is it a menubar, are the buttons thumbnails, are they normal HTML buttons? If you want assistance then you will need to be more specific.
I set up my web page in tables, was I to use frames?
Tables are meant for tabular data, not for layouts. Thankfully frames are a thing of the past. It is best to go for a CSS site. To help you with this, have a look here http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l
Create a mockup of the page that you want to create and upload it. Then supply a link to the page so that we can see what it is that you want.
Gramps
Thank you for your help. I uploaded my sample page to http://www.designintersection.com/sample/
the file is called PortfolioE.jpg.
I am still having trouble. For example, if we take the first button, on mouseover, I would like it to swap with a faded image of that button and on mouse click, i would like the large image to appear below. So the first thing i'm doing with the button is a simple rollover, can I do a disjoint rollover as well to that same button?
Use CSS Opacity to change thumbnail density on hover.
CSS:
#thumbnail img {opacity: 0.5 }
#thumbnail img:hover {opacity: 1.0}
HTML:
<div id="thumbnail">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
Use Show/Hide Layer Behaviors to make full size images appear on click.
Working demo (view source to see the code).
http://alt-web.com/DEMOS/Show-Hide-Layers.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
This is the code for the button
<td><a href="javascript:;"><img src="7.jpg" name="seven" width="82" height="94" id="seven" onmouseover="MM_swapImage('seven31','','image "seven31"',1)" onmouseout="MM_swapImgRestore()" /></a></td>
This is the code for the image
<td colspan="11" rowspan="2"><a href="javascript:;"><img src="31.jpg" name="seven31" width="890" height="471" id="seven31" onmouseover="MM_swapImage('seven','','image "seven"',1)" onmouseout="MM_swapImgRestore()" /></a></td>
The button should be this -
<td><a href="javascript:;" onclick="MM_swapImage('seven31','','pathA',1)"><img src="7.jpg" name="seven" width="82" height="94" id="seven" /></a></td>
The image should be this -
<td colspan="11" rowspan="2"><a href="javascript:;"><img src="31.jpg" name="seven31" width="890" height="471" id="seven31"/></a></td>
pathA should be the path from the current page to the IMAGE (in other words it should be the pathname for the NEW image to be swapped in when you click the link - perhaps something like "31-large.jpg").
If you would upload your page and post a link to it, that would help us get you going!
Thanks so much for helping me.
This is my button
<td><a href="javascript:;" onclick="MM_swapImage('seven31','','31-large.jpg',1)"><img src="7.jpg" name="seven" width="82" height="94" id="seven" /></a></td>
This is my image
td colspan="11" rowspan="2"><a href="javascript:;"><img src="31.jpg" name="seven31" width="890" height="471" id="seven31"/></a></td>
Is there something i have to do to set up path A. I just copied the code and pasted it in and onclick the image disappears.
We'll onmouseover fading then onclicking gets a bit more complex and you'll probably have to look at a jQuery solution. Below is a simple example, just change 'yourImage.jpg' to the name of your image. You can then add an onclick event to the image using the built in Dreamweaver behaviours
<!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>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".fade").hover(function() {
$(this).stop().animate({opacity: "0.2"}, 'slow');
},
function() {
$(this).stop().animate({opacity: "1"}, 'slow');
});
});
</script>
</head>
<body>
<img src="yourImage.jpg" class="fade" width="200" height="150" />
</body>
</html>
North America
Europe, Middle East and Africa
Asia Pacific