Graphic Design solutions that are worth their weight in gold for print, exhibits and the web.
  HOME       INTRODUCTION       PROFILE       PORTFOLIOS       CONTACT  

Now Accepting Major Credit Cards

Solution Graphics

LOGIN | REGISTER

     
 

DIVs

DIVs do what it says. It "Divides" the area and its content from the rest of the page content.

Sample of a DIV using Cascading Style Sheets

The CSS DIV Class Result
.leftNavForms {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images/common/grads/btmGrad.png);
background-repeat: repeat-x;
background-position: left bottom;
border: 1px dotted #FFFFFF;
}
<div class="leftNavForms">Sample</div>
Sample

Sample of a DIV using a Javascript

Script that is added to the <head> of this HTML page DIV Id The Result

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.guymercier.com/scripts/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [275, 206], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../../images/portfolios/webNew/275/mine.jpg", "http://www.guymercier.com/portfolios/webPortfolios/web/index.php", "_top", "Web Site Portfolio"],
["../../images/portfolios/recent/275/acoPoster.jpg", "http://www.guymercier.com/portfolios/recentWork/index.php", "_top", "Recent Work Portfolio"],
["../../images/portfolios/flash/275/fintrac.jpg", "http://www.guymercier.com/portfolios/webPortfolios/flash/index.php", "_top", "Flash Portfolio"],
["../../images/portfolios/3d/275/microphone.jpg", "http://www.guymercier.com/portfolios/webPortfolios/3dsamples/index.php", "_top", "3D Portfolio"],
["../../images/portfolios/paintings/275/paintings_0011_amy.jpg", "http://www.guymercier.com/portfolios/illustrationPortfolios/paintings/index.php", "_top", "Paintings & Drawings"],
["../../images/portfolios/newsletter/275/newsletter_0000s_0009_TRANSPORT.jpg", "http://www.guymercier.com/portfolios/illustrationPortfolios/newsletterIllustrations/index.php", "_top", "Newsletter Illustrations"],
["../../images/portfolios/vector/275/corvette.png", "http://www.guymercier.com/portfolios/illustrationPortfolios/vectorartwork/index.php", "_top", "Vector Artwork Portfolio", "", "", ""]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})

var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [500, 375], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../../images/portfolios/webNew/500X375/onComputer/mine.jpg", "http://www.guymercier.com/portfolios/webPortfolios/web/index.php", "_top", "Web Site Portfolio"],
["../../images/portfolios/recent/500/acoPoster.jpg", "http://www.guymercier.com/portfolios/recentWork/index.php", "_top", "Recent Work Portfolio"],
["../../images/portfolios/flash/640/fintrac.jpg", "http://www.guymercier.com/portfolios/webPortfolios/flash/index.php", "_top", "Flash Portfolio"],
["../../images/portfolios/3d/640X480/microphone.jpg", "http://www.guymercier.com/portfolios/webPortfolios/3dsamples/index.php", "_top", "3D Portfolio"],
["../../images/portfolios/paintings/500/paintings_0011_amy.jpg", "http://www.guymercier.com/portfolios/illustrationPortfolios/paintings/index.php", "_top", "Paintings & Drawings"],
["../../images/portfolios/newsletter/500/newsletter_0000s_0009_TRANSPORT.jpg", "http://www.guymercier.com/portfolios/illustrationPortfolios/newsletterIllustrations/index.php", "_top", "Newsletter Illustrations"],
["../../images/portfolios/vector/500/corvette.png", "http://www.guymercier.com/portfolios/illustrationPortfolios/vectorartwork/index.php", "_top", "Vector Artwork Portfolio", "", "", ""]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 750, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

<div id="fadeshow1"> </div>

<div id="fadeshow2"> </div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px"> <a href="#" class="prev"><img src="../../images/fadeslideshow/left.png" width="27" height="24" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="../../images/fadeslideshow/right.png" width="27" height="24" style="border-width:0" /></a></div>
</div>

The Javascript it self is fadeslideshow.js Download it to your web folder when prompted by the new browser window.

Support Images

The fadeslideshow.js calls up these graphics.

x loadgifrestoreleftright

 
         
  Home | Site Map | Contact
Copyright © 2003-2010 GuyMercier.com, Inc. All rights reserved. | Last Updated: September 11, 2010
Return to Top of Page