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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Mouseover Image with Image Map

    I am trying to create an online CV for my personal website.
    www.becks1986.co.uk/cv

    What I want to achieve is when i mouseover the Jobs on the image it will display another image, with the job description (at the moment this picture only appears when the hyperlink is clicked and BT is the only working link).

    I am attempting to use the Mouseover with an image and a caption option from http://www.scientificpsychic.com/etc/css-mouseover.html

    As it is a single image i am working with i understand that I can use Image mapping to set the links.

    What i want to know is how do i get the image map code
    Code:
     
    <div class="container">
      <div class="content">
    	<img src="images/CV.png" width="1024" height="1280" border="0" usemap="#Map" id="Image1"/>
        <map name="Map" id="Map">
          <area shape="rect" coords="202,317,721,344" href="images/BT.png"/>
          <area shape="rect" coords="202,342,722,369" href="GS.png" target="_self" />
          <area shape="rect" coords="202,370,701,393" href="IDB.png" target="_self" />
          <area shape="rect" coords="202,393,791,419" href="PCW.png" target="_self" />
          <area shape="rect" coords="202,470,632,495" href="UCLAN.png" target="_self" />
          <area shape="rect" coords="202,494,463,522" href="SKC1.png" target="_self" />
          <area shape="rect" coords="202,520,630,547" href="SKC2.png" target="_self" />
          <area shape="rect" coords="202,546,334,573" href="HGS.png" target="_self" />
        </map>
    Each Mapping having a link to a different job description image

    into the supplied code from the above website
    Code:
    CSS code for class dropt:
    span.dropt {border-bottom: thin dotted; background: #ffeedd;}
    span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
    span.dropt span {position: absolute; left: -9999px;
      margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
      border-style:solid; border-color:black; border-width:1px; z-index: 6;}
    span.dropt:hover span {left: 2%; background: #ffffff;} 
    span.dropt span {position: absolute; left: -9999px;
      margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
      border-style:solid; border-color:black; border-width:1px;}
    span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;}
    Code:
    <span class="dropt" title="Title for the pop-up">Hot Zone Text
      <span><img src="card.jpg"/><br/>
      Caption
      </span>
    </span>

    I hope i am not violating any rules posting this, and that it is in the correct place.

    I hope someone can help with this as it's driving me insane

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Replace the href with an onmouseover function call which makes the wanted image appear as a modal window. Of course you need an onmouseoff function which closes the window so that it disappears when the mouse is off.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I will try this later and let you know how I get on

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok i think i'm in this way over my head, I don't understand CSS very well and have no idea how i integrate the .dropt class into the image map. From what i understand from the rules i can't actually ask someone to write this for me. so i think i'm going to have to leave it and find a simpler way until i can actually learn how to use the internet properly.

    Thanks any way for the help DrDos i do appreciate it

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi the Becks1986,

    I would dump the image map and use CSS instead.

    Check out the basic example - (in a zip file) - here...


    coothead
    Last edited by coothead; 10-31-2013 at 09:08 PM. Reason: changed the link for new zip file

  • Users who have thanked coothead for this post:

    Becks1986 (10-31-2013)

  • #6
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    COOTHEAD!!!!! If i didnt know my wife would kill me i would offer up my 3rd child in gratitude. thats exactly what i was going for thankyou

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have stumbled on another problem, the code you have works great for what i want to achieve, however now when i hover over the links it shows both images in the same box (i have updated the online version so you can see). is this a limitation of the code or is there a way to have seperate boxes with separate images for each link?

    Sorry to keep being a pain in the backside and again i appreciate all the help so far

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You have a missing double quote from your first listing, which may be messing things up further down the line.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #9
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    You have a missing double quote from your first listing, which may be messing things up further down the line.
    something so simple that is so damn frustrating. thankyou thankyou thankyou. I wish i had joined this forum much sooner.

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Becks1986,

    The code that I gave you used a basic hover for boxes of equal dimensions.

    What you really require is specific coding for each "li element".

    Check out this link to see the method to use...

    coothead

  • #11
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i changed it so the boxes dimensions are set to auto and it seems to be working a treat

  • #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Becks1986,

    you must have a large monitor screen.

    Th BT box is too high for my screen.

    p.s.
    Your C.V. shows that you have not worked since 2009!
    Could that be a problem
    coothead
    Last edited by coothead; 10-31-2013 at 10:12 PM.

  • #13
    New to the CF scene
    Join Date
    Oct 2013
    Location
    Preston UK
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Becks1986,

    you must have a large monitor screen.

    Th BT box is too high for my screen.

    p.s.
    Your C.V. shows that you have not worked since 2009!
    Could that be a problem
    coothead
    Yeah i have a 19 inch screen and a 24 inch screen.

    Been out of work since then looking after my wife who hasn't been well, trying to finish my degree and for the last 2.5 years been chasing around my daughter who has me wrapped round her little finger.

    Only recently started playing with Photoshop and Illustrator as something to relieve boredom and help a few mates out. So its another string inmy bow, now just to get my head round this HTML/CSS lark and i'll be laughing.

    cheers again for the help. don't know if or how to mark this as a complete/resolved issue


  •  

    Posting Permissions

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