...

View Full Version : Replace or show/hide a DIV using 'a' and 'a:hover' method..



langauld
12-12-2007, 03:31 PM
Is it possible? :)


..reason I ask is because I'm trying to make a fancy layout for MySpace. I've been following a guide in a CSS book I own, that shows how to use a 'hide and reveal' method for pictures, whereby there are several thumbnails, and when the user mouseover's each, a bigger version of the picture shows in the main area. When the user mouseoff's, the image disappears from the main area.

I want to use the same sort of method for my page. Below is a screenshot of the initial design:

http://i241.photobucket.com/albums/ff303/langauld/site.jpg

The main area (purple part at the top) will change colour, and content, to another DIV. That current one is called 'maindiv', and the others will be called 'maindiv2', 'maindiv3' etc. Each is a class (ie, has a '.' before it to declare it), as ID's can't be used on MySpace as it filters out script-related icons - those including '#'.

Examples of the code:

CSS:

.mainform {
background-color : D200FF;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
z-index : 0;
}
.mainform2 {
background-color : FF0000;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
z-index : 0;
visibility : visible;
}

...

.selabout a {
background-color : FF0000;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 381px;
position : absolute;
display : block;
z-index : 0;
}
.selabout a:hover .mainform2 {
display : block;
visibilty : hidden;
}

HTML:

<div class="mainform">
...
</div>

...

<div class="selabout">
<a href="http://"><img src="selabout.png" /></a>
</div>


'selabout' is the selector for 'about', the first line below the main section.

I hope I've explained myself well enough, talking through code is a hard thing to do..! If there's anything need asking, let me know..

Cheers folks.

langauld
12-12-2007, 08:28 PM
..so no-one knows?

Excavator
12-12-2007, 08:49 PM
several thumbnails, and when the user mouseover's each, a bigger version of the picture shows in the main area. When the user mouseoff's, the image disappears from the main area.

That's called a disjointed rollover. Here's a couple examples of how to do that:
one (http://nopeople.com/CSS/disjointed_rollover/)
two (http://nopeople.com/CSS/disjointed_rollover_photoalbum/)
three (http://nopeople.com/iastor/)

langauld
12-12-2007, 09:57 PM
Thanks for your reply, Excavator.

I know how to do that with images, but like the topic title reads, I'd like to know if there's a way to replace the images in that process for actual DIVs.. I've tried myself, but it hasn't worked. Here's the code I used:

CSS

a {
border : none;
outline : none;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
img {
border : 0px;
padding-bottom : 0px;
display : block;
}

form {
color : FFFFFF;
font-family : trebuchet ms, arial, sans-serif, helvetica;
font-size : 18px;
}
textarea {
color : FFFFFF;
font-family : trebuchet ms, arial, sans-serif, helvetica;
font-size : 12px;
font-weight : bold;
font-style : italic;
overflow : auto;
padding : 6px;
}
input {
color : FFFFFF;
font-family : trebuchet ms, arial, sans-serif, helvetica;
font-size : 18px;
text-decoration : none;
text-align : right;
background-color : transparent;
border : none;
}
.btncomment {
width : 80px;
height : 22px;
right : 0px;
top : -24px;
position : absolute;
}

.mainform {
background-color : D200FF;
width : 746px;
height : 278px;
left : 50&#37;;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
}
.mainform2 {
background-color : FF0000;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}
.mainform3 {
background-color : FFD800;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}
.mainform4 {
background-color : FF00BA;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}
.mainform5 {
background-color : 006CFF;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}
.mainform6 {
background-color : 00FF06;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}
.mainform7 {
background-color : FFAE00;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}
.mainform8 {
background-color : 00FFEA;
width : 746px;
height : 278px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 100px;
position : absolute;
visibility : hidden;
}

.thelang {
background-color : transparent;
width : 510px;
height : 128px;
right : 0px;
top : 0px;
position : absolute;
}
.defaultphoto {
background-color : transparent;
border : 6px solid white;
width : 189px;
height : 252px;
left : 7px;
top : 7px;
position : absolute;
}
.thelangurls {
background-color : transparent;
width : 420px;
height : auto;
right : 69px;
top : 100px;
position : absolute;
}
.homesec1 {
background-color : transparent;
width : 170px;
height : 142px;
right : 350px;
top : 134px;
position : absolute;
}
.homesec2 {
background-color : transparent;
width : 326px;
height : 40px;
right : 7px;
top : 134px;
position : absolute;
}
.homesec2comment {
background-color : transparent;
width : 326px;
height : 102px;
right : 7px;
top : 180px;
position : absolute;
}

.abouttitle {
background-color : transparent;
width : 307px;
height : 99px;
right : 0px;
top : 0px;
position : absolute;
}

.musictitle {
background-color : transparent;
width : 306px;
height : 98px;
right : 0px;
top : 0px;
position : absolute;
}

.intereststitle {
background-color : transparent;
width : 450px;
height : 99px;
right : 0px;
top : 0px;
position : absolute;
}

.tvtitle {
background-color : transparent;
width : 105px;
height : 98px;
right : 0px;
top : 0px;
position : absolute;
}

.moviestitle {
background-color : transparent;
width : 376px;
height : 100px;
right : 0px;
top : 0px;
position : absolute;
}

.bookstitle {
background-color : transparent;
width : 307px;
height : 99px;
right : 0px;
top : 0px;
position : absolute;
}

.heroestitle {
background-color : transparent;
width : 358px;
height : 99px;
right : 0px;
top : 0px;
position : absolute;
}

.selabout {
background-color : FF0000;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : -373px;
margin-top : 381px;
position : absolute;
display : block;
}
.selabout a:hover .mainform2 {
visibilty : visible;
}
.selmusic {
background-color : FFD800;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : -266px;
margin-top : 381px;
position : absolute;
}
.selinterests {
background-color : FF00BA;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : -159px;
margin-top : 381px;
position : absolute;
}
.seltv {
background-color : 006CFF;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : -52px;
margin-top : 381px;
position : absolute;
}
.selmovies {
background-color : 00FF06;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : 55px;
margin-top : 381px;
position : absolute;
}
.selbooks {
background-color : FFAE00;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : 162px;
margin-top : 381px;
position : absolute;
}
.selheroes {
background-color : 00FFEA;
width : 104px;
height : 332px;
left : 50%;
top : 0%;
margin-left : 269px;
margin-top : 381px;
position : absolute;
}

HTML:

<div class="mainform">
<div class="defaultphoto">
<a href="http://"><img src="photo.png" /></a>
</div>
<div class="thelang">
<img src="thelang.png" />
</div>
<div class="thelangurls">
<a href="http://distantweb.co.uk/">www.distantweb.co.uk</a>&nbsp;//&nbsp;<a href="http://www.myspace.com/langy">www.myspace.com/langy</a>
</div>
<div class="homesec1">
>&nbsp;<a href="http://">send me a message</a>
<br />>&nbsp;<a href="http://">add me as a friend</a>
<br />>&nbsp;<a href="http://">view my friends</a>
<br />>&nbsp;<a href="http://">view my pictures</a>
<br />>&nbsp;<a href="http://">view my videos</a>
<br />>&nbsp;<a href="http://">view my blog</a>
</div>
<div class="homesec2">
>&nbsp;<a href="http://">home</a>
<br />>&nbsp;write me a comment...
</div>
<div class="homesec2comment"
<form id="comment" method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="2860768">
<textarea name="f_comments" style="width: 326px; height: 90px; background: transparent; border: 6px solid white;">
</textarea>
<input type="submit" class="btncomment" value="submit!">
</form>
</div>
</div>
<div class="mainform2">
<div class="abouttitle">
<img src="about.png" />
</div>
</div>
<div class="mainform3">
<div class="musictitle">
<img src="music.png" />
</div>
</div>
<div class="mainform4">
<div class="intereststitle">
<img src="interests.png" />
</div>
</div>
<div class="mainform5">
<div class="tvtitle">
<img src="tv.png" />
</div>
</div>
<div class="mainform6">
<div class="moviestitle">
<img src="movies.png" />
</div>
</div>
<div class="mainform7">
<div class="bookstitle">
<img src="books.png" />
</div>
</div>
<div class="mainform8">
<div class="heroestitle">
<img src="heroes.png" />
</div>
</div>
<div class="selabout">
<a href="#"><img src="selabout.png" /></a>
</div>
<div class="selmusic">
<img src="selmusic.png" />
</div>
<div class="selinterests">
<img src="selinterests.png" />
</div>
<div class="seltv">
<img src="seltv.png" />
</div>
<div class="selmovies">
<img src="selmovies.png" />
</div>
<div class="selbooks">
<img src="selbooks.png" />
</div>
<div class="selheroes">
<img src="selheroes.png" />
</div>

So basically, I want to use the same technique used for those examples you provided, but to replace the main 'thelang' area to change to 'about' with a red background and different contents when the user mouses over the 'about' red line, or to 'music' with a yellow background and different contents when the user mouses over the 'music' yellow line.

I've made bold the areas in the code above that are of relevance to what I just explained, in regard to changing to the 'about' section.

Any questions just ask :) ..and if anyone knows for certain that this isn't possible, then I'll just resort to an image-based solution. But I want to avoid that at all costs, as it isn't a very professional way to go about it, and all my past layouts have been very image-based until this one!

Thanks a lot in advance!

Excavator
12-12-2007, 10:51 PM
Once the menu/layout is loaded in cache a change to the next page with the same menu/layout is hardly noticable.
here is an example of what I mean, click on the links to watch it: http://nopeople.com/CSS/fast/

_Aerospace_Eng_
12-12-2007, 10:53 PM
No it can't be done with divs. You can do it with spans.

http://psacake.com/web/jl.asp

HTML looks something like this

<a class="info" href="http://www.w3.org/Style/CSS/">css<span>cascade style sheets, the separation from content and presentation</span></a>

jlhaslip
12-12-2007, 11:56 PM
Use this method: http://jlhaslip.trap17.com/samples/tooltips/index.html

Uses spans similar to the suggestion above.
Adjust the width and position according to what you need.

langauld
12-13-2007, 12:11 AM
Thanks for your replies, both of you =)

So when you say about using tooltips, you mean for me to make the tooltip disguised as the main area, and sort of overlap the original? If so, how am I going to manage to design it like I would a DIV? I understand the concept of making it the same size as the main area, changing the background colour of it etc, but how will I include images and the positioning attributes of elements inside of it like I would with a DIV?

The following are examples of how I plan on the site's appearence when the user mouse over's the corresponding line:

http://i241.photobucket.com/albums/ff303/langauld/siteabout.png

http://i241.photobucket.com/albums/ff303/langauld/sitetv.png

langauld
12-13-2007, 04:24 PM
Thank you so much to everyone that's helped! I've managed to get a working solution using the span method :D woohoo!

I'll edit this post once the site is complete so that any who are interested can check it out :)

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum