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
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts

    picture info on mouse over

    Hello,
    I would like to have a rectangle with information that appears when the mouse goes over the pictures of the gods at the link below. I tried
    Code:
    src="images/goddess_nephthys.gif"
    but this did not work. thanks for your kind help!
    http://www.sacred-egypt.com/Ancient%...sses/menu.html

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Not sure what you are trying to accomplish, do you want an alternate picture when you roll over the existing image.. like an image that talks about the god.. or are you looking for an alt tag?

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.cssplay.co.uk/menu/balloons

    sounds like you want a simple version of that.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    mikacruz (05-15-2008)

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    oh ok, that would be CSS visibleroperty...!

  • Users who have thanked jcdevelopment for this post:

    mikacruz (05-15-2008)

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    San Francisco
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    If you just want a short text description you can use the title attribute
    Code:
    <img src="images/goddess_nephthys.gif" title="Nephthys, mother of Anubis">
    which will display a little drop-down text box.

  • Users who have thanked ccemmett for this post:

    mikacruz (05-15-2008)

  • #6
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    hello,
    Yes what ccemmett suggests is good enough but it takes a relatively long time to respond... any alternative?
    thanks again

  • #7
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    harbingerOTV, yes a simple version of that would be great. Its much faster.

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    a simple way of doing that might be something like this (if anyone has a better way please post or let me know if im doing this wrong or there is an easier way)

    Code:
    .picture1 a{
    background-image:url(picture.gif);
    background-repeat:no-repeat;
    width:--px;/*however big*/
    height:--px;/*however big*/
    float:left;
    padding:5px;
    }
    
    .picture1 a:hover{
    background-image:url(hover-info-box.gif);
    background-repeat:no-repeat;
    width:--px;/*however big*/
    height:--px;/*however big*/
    position:absolute;
    left:/*position it where you need it, like above the first image*/
    top:/*position it where you need it, like above the first image*/
    z-index:100;
    }
    Thats a simple way of doing it, and just name as many classes as you have pictures!
    If you have any more questions dont hesitate!

  • Users who have thanked jcdevelopment for this post:

    mikacruz (05-15-2008)

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    without individual classes and without javascript you can do this:

    Code:
    <a href="#x" class="img"><img src="image.jpg" width="" height="" /><span>Your description text</span></a>
    Code:
    a.img {
    position: relative;
    }
    
    a.img span {
    display: none;
    position: absolute;
    }
    
    a.img:hover span {
    display: block;
    top: X;
    left: X;
    padding: 6px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    }
    you'll need to set your left/right top/bottom to your liking. This would apply to every 'a' with a class of 'img' and every span inside each 'a.img'

    Pretty close to what jcdevelopment had anyway, just without a background image.




    [/code]
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    mikacruz (05-15-2008)

  • #10
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    thanks guys.. havent tried yet though..


  •  

    Posting Permissions

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