...

View Full Version : Is this flash? Or mouseover? Or a combination?



Diane48
08-26-2009, 04:58 PM
http://www.artpartner.com/AP/C.aspx?VP3=HomeArtistList_VPage&ARID=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.

Diane48
08-30-2009, 02:56 PM
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?

_Aerospace_Eng_
08-31-2009, 01:32 AM
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 (http://fancybox.net/).

Diane48
08-31-2009, 12:29 PM
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.

_Aerospace_Eng_
08-31-2009, 01:46 PM
No the artists' names are not an image. Its simply text. Onmouseover of the authors name, a single image element gets its 'src' changed.

Scriptet
08-31-2009, 01:56 PM
You could also do this with CSS as well as JS

Diane48
08-31-2009, 11:21 PM
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.

_Aerospace_Eng_
09-01-2009, 05:32 AM
Nothing on that site is done in flash.

Diane48
09-01-2009, 03:30 PM
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?

_Aerospace_Eng_
09-01-2009, 03:36 PM
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.

Diane48
09-02-2009, 03:00 AM
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.

Scriptet
09-02-2009, 09:12 PM
Here's a simple CSS version of the hover effect, where each one links to a different page..


<!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

waxdoc
09-03-2009, 01:17 AM
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

Diane48
09-03-2009, 04:55 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum