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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Replace or show/hide a DIV using 'a' and 'a:hover' method..

    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:



    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:
    Code:
    .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:
    Code:
    <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.

  • #2
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ..so no-one knows?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    two
    three
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Code:
    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:
    Code:
    <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!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    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 it can't be done with divs. You can do it with spans.

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

    HTML looks something like this
    Code:
    <a class="info" href="http://www.w3.org/Style/CSS/">css<span>cascade style sheets, the separation from content and presentation</span></a>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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.

  • #8
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:




  • #9
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much to everyone that's helped! I've managed to get a working solution using the span method woohoo!

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

    Thanks again!


  •  

    Posting Permissions

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