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 10 of 10
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Some insight on having a box border box appear on mouseover

    If I wanted to have a box appear on a mouseover, will this involve CSS or javscript?

    Can a person stack a white box on top of a colored box, and have the colored one displayed?

    I've found dozens of sample codes regarding mouseover; however, they all seem to have an image inside, and basically you're applying a border to an image.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Kevin_M_Schafer View Post
    If I wanted to have a box appear on a mouseover, will this involve CSS or javscript?
    You could use just css, or just javascript or a combination of the two. It depends on what you are mousing over and where you want the box to appear. Would need more details on how you want things to look and function on your page.
    Quote Originally Posted by Kevin_M_Schafer View Post
    Can a person stack a white box on top of a colored box, and have the colored one displayed?
    yep, no problem, but need more details on how you want things to look and work.

  • Users who have thanked bullant for this post:

    Kevin_M_Schafer (05-03-2011)

  • #3
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi bullant,

    Thank you for the reply.

    I have a news site -- but I'm building a new one that's clean. I would like to have a light blue box appear around text when a mouse if moved over the text. The text amounts to a two-line story headline -- which is the hyperlink, with a byline below it that says when the story was posted, followed below that with a subheader, which will tell a little bit about the story.

    I'm looking at having about five of these. Each blue box will be to the right of a thumbnail.

    I find lots of ideas with changing borders, but they all wrap around an image. I don't want these particular hyperlinks to change color, but if the whole parameter around the headline and byline would change that would be a real eye-catcher.

    Here is the site in construction: http://www.theeagleextra.com/sophie.html

    You can see the main story headlines and the blue boxes I'm talking about.

    I'll be honest with you, bullant, I don't necessarily have the capacity to write this code, CSS or Javascript. I use tons of div tags because I don't know any better -- but I'm getting better. As soon as my site is launched, I'm going to turn around and improve the code -- you have my word on it. Including an external style sheet.

    Magic blue boxes is about all I have left to figure out to get my page up and running. If you can help, it would be very much appreciated.

    Thanks,
    --Kevin

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    Basically, I give the container holding the link and text a class name of thumbTeasers and then just change the border colour from light blue to navy blue when you mouser over the div.

    So "in theory", if I understand you correctly all you need to do is give your link and text containers (<div id="topictext1">) a class name and then apply the styles to that class as in this demo. Obviously, change the colour, width and padding styles to suit your page.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                .thumbTeasers {
                    width: 13em;
                    padding: 10px 10px 10px 10px;
                    border: 2px solid rgb(135,198,200);
                }
                .thumbTeasers:hover {
                    border-color: rgb(0,0,128);
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div class="thumbTeasers">
                <a href="wherever">
                    Fishing the waters for a fuel oil spill – Rural Fairfax
                    The Eagle Extra
                </a>
                <div>Posted 5-2</div>
                <div>This is a byline for more information about story</div>
            </div>
        </body>
    </html>
    Last edited by bullant; 05-03-2011 at 06:02 AM.

  • Users who have thanked bullant for this post:

    Kevin_M_Schafer (05-03-2011)

  • #5
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    bullant, this is amazing -- thank you!

    I'm styling it now and will give an update this afternoon with the results.

    Thank you again. I very much appreciate your help and insight.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    bullant,

    it works perfectly!

    take a look at your magic boxes in action: http://www.theeagleextra.com/sophie.html

    i was going to wait until later this afternoon to style it, but i just couldn't wait. now it's back to printing orders for my customers. i'll be working on my site more this afternoon.

    i don't know why, but my w3c validation logo isn't a hyperlink in ff and chrm. i have a white border around it to cover up their blue border, maybe that's why it doesn't work in those browsers. i tried applying border="0" and it worked, but then it no longer passed validation.

    okay, see you later. thank you again!

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem

    It's not obvious to me how you added a white border on top of the image's blue border and yes that is probably why the validation logo image is not a clickable link in at least FF4 (it is in IE9)

    But to remove that annoying border that appears on images when they are wrapped in an <a> you can remove it using css. If you adding border="0" caused a validation error, I suspect then that you added it to the <img>.

    To fix your validation logo link try commenting out whatever you did to add the white border and then in your css add

    Code:
    #w3c img {
        border: none;
    }
    That should remove any borders in all images in an element with id="w3c"

  • Users who have thanked bullant for this post:

    Kevin_M_Schafer (05-04-2011)

  • #9
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    bullant,

    It worked to code-out the border!

    I never thought of commenting out a piece of code for troubleshooting or testing. I was always copying it to notepad and then deleting it and then putting it back again. Thanks for the new tip. I'll use it from now on.

    I commented-out my border code, which was right below my w3c css code, and the blue border appeared. Then I added your fragment and the border went away. That's pretty neat.

    This code learning is truly amazing and I'm enjoying the daylights out of it.

    I hope to power up the new front page by tomorrow morning -- hopefully. I still have a good eight hours or so left to go.

    Thanks again, bullant.

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome

    Whether you comment out code or delete it depends on the circumstances. If I have code that is working and I just want to add/tweak something and am not sure if it will work, I usually comment out relevant code, make my changes and if they work then I delete the commented out code. If they didn't work, I remove the comment tags and the changes I made and I'm back to where I was before making the changes.
    Last edited by bullant; 05-04-2011 at 01:55 AM.


  •  

    Posting Permissions

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