Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is this flash? Or mouseover? Or a combination?

    http://www.artpartner.com/AP/C.aspx?...ID=2UYSXLL0YJG

    I know the basics of design, but I certainly can't code without help. I could probably even figure out how to do this with mouseover...I think, but it seems to be more than that.

    I would certainly appreciate any help you can give me.

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had an email that indicated I had a response to this thread, but I can't see it when I come to the board. Do I have my settings wrong?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its a crap ton of divs, and tables. The mouseover is pretty simple, just changing a simple image on mouseover. The "popup" that occurs can be done with something like lightbox or fancy box.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you saying the artists' names are an image? Don't mouseovers usually involve replacing an image with another one that's exactly in the same place as the original? This image appears across the page.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No the artists' names are not an image. Its simply text. Onmouseover of the authors name, a single image element gets its 'src' changed.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    You could also do this with CSS as well as JS

  • #7
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay...

    I'm new to flash and CSS, so I'm kind of over my head, but I'll give it a try. I'm trying to create a website for my own business and it's beating me.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Nothing on that site is done in flash.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Nothing on that site is done in flash.
    I don't know how much we're supposed to ask on this board, but could you offer me some specific advice?

    And do you know any books or websites that might help me?

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well I gave you a link to a site that will help you with the "photo previews". The onmouseover stuff is everywhere. Do a search for "change image onmouseover".

    Perhaps you should consider hiring a professional to build something like this for you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Well I gave you a link to a site that will help you with the "photo previews". The onmouseover stuff is everywhere. Do a search for "change image onmouseover".

    Perhaps you should consider hiring a professional to build something like this for you.
    If the economy weren't in the tank and money too tight, I would hire a professional. As it is, we simply can't afford it.

    Thank you for your help. I've decided to try to get the site up the way I had originally planned, then try to grasp this concept. I know how to do mouseover, I just don't know how to replace an image across the page.

    I assume it has something to do with creating different classes for each image, but I'm not sure. I will figure it out though.

  • #12
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Here's a simple CSS version of the hover effect, where each one links to a different page..
    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>
    <style type="text/css" media="screen">
    /*The Menu Holder*/
    #artists ul {
    	margin:0 auto; padding:0;
    	width:700px; /*Total Width of Menu*/
    	position:relative; /*Allows for absolute positioning of the span*/
    	list-style:none;
    }
    #artists ul li{
    	margin:0; padding:0;
    }
    /*The Artist Text Link*/
    #artists ul li a{
    	display:block;
    	margin-bottom:10px; /*Gap between Each One*/
    	width:500px; /*Width*/
    	background:#CC3; /*Background Colour*/
    	font-size:18px;
    	font-family:Arial, Helvetica, sans-serif;
    	text-align:center;
    	height:30px; /*Height*/
    	line-height:30px;
    	text-decoration:none;
    	color:#000;
    }
    /*Artists Text Link On Hover*/
    #artists ul li a:hover{
    	background:#CF3;
    }
    /*The Picture*/
    #artists ul li a span {
    	display:block;
    	width:200px; /*Pic Width*/
    	height:500px; /*Pic Height*/
    	background:#333; /*Default Background*/
    	position:absolute;
    	right:0;
    	top:0;
    }
    /*Define Each Individual Picture Here*/
    #artists ul li.artist1 a:hover span {
    	background: #3F9; /*The image for the link would go here*/
    	z-index:100;
    }
    #artists ul li.artist2 a:hover span {
    	background: #3F6;
    			z-index:100;
    }
    #artists ul li.artist3 a:hover span {
    	background: pink;
    			z-index:100;
    }
    #artists ul li.artist4 a:hover span {
    	background:#000;
    			z-index:100;
    }	
    </style>
    </head>
    
    <body>
    
    </body>
    <div id="artists">
    	<ul>
    		<li class="artist1"><a href="#">Artist Name 1<span></span></a></li>
        	<li class="artist2"><a href="#">Artist Name 2<span></span></a></li>
        	<li class="artist3"><a href="#">Artist Name 3<span></span></a></li>
        	<li class="artist4"><a href="#">Artist Name 4<span></span></a></li>
    	</ul>
    </div>
    </html>
    For the popup thing you'd need something like a lightbox as suggested

  • #13
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    name / id the image

    As far as I understand it, you place (in a CSS <div> or Table <td>) your main placeholder image on the page at the desired spot and give it a name="spot" and id="spot" [id is newer way] as an attribute in its image <img> tag. It's best if all the rollover images and placeholder are the same size, but do NOT include a height=" " or width=" " for the placeholder spot image.

    Then, in your mouseover and/or mouseout or onclick script, you reference the placeholder image by name / id and specify new SRC='image.gif' (nest the quotes properly).

    Such as http://www.auntnini.com/new/index.htm [<a href="#nogo" onmouseover="document.images['holder'].src='worldWrap.jpg'" onclick="document.images['holder'].src='worldWrap.gif'"> Earth Wrap </a>] or http://www.jacquimorgan.com/hist/index.html or http://www.chanit.com/people/oil.htm or http://www.williamlow.com/cityscape/index.html or http://www.morgangaynin.com/biers/ (the first site I saw use this years ago).

    You can also use a hover/span effect such as http://artdemo.tripod.com/sketch/tableTestCSS.html#top

  • #14
    New Coder
    Join Date
    Aug 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help. I am working now so I don't have time to experiment with it, but tonight I'm going to try to get it down.

    I've been obsessing over it so much it's preventing me from doing the page as I planned. I almost have to take time to get it this way or I'll never be happy with it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •