Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Nov 2006
    Posts
    20
    Member #
    14246
    Ok..heres what I'm trying to do.
    If you look at this map http://www.colonialzone-dr.com/CZ_Map.html
    What I want to do is make the mouse over description show up. I tried just using the link description and it is not long enough. What I really want is to have a small pop up window open with the description. How do I do this with these images being all the same? All descriptions for this script I see has text links not a image link.

    Would it be best to number each box and have an index with those numbers on the page with the title of the item. This way if someone copies it to use taking a tour of the area they have the descriptions. But the thing with this is I already have the sights index page with all the location titles here. http://www.colonialzone-dr.com/sights.html

    I would love the descriptions to pop up in their own little window because linking each item on the map to a page opening in a new window that shows he entire page content instead of just that image description is annoying. It would be really great if I could place a small picture of the location in the pop up window also.
    Anyone have any ideas?

    I'm lost as to what would be best.

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Okay. First off... the map you showed uses a title for every image. If you look at the code, each little camera is placed in its own div with everything in that div corresponding to its location on the map.

    What you want is a little bit different, but uses the same logic.

    My suggestion would be to define an a class to handle the pop up, and a series of ids to handle each position.

    CSS:
    Code:
    a.camera {all the styling stuff you want to appear in the pop-up}
    a.camera:link {display: hidden}
    a.camera:hover {display: block}
    
    #c01 {left: 200px; top: 26px;}
    #c02 {left: 367px; top: 45px;}
    #c03 {left: 12px; top: 57px;}
    HTML Code:
    <a id="c01" class="camera"><img src="images/temple.jpg" alt="temple"/> This is the photo of the Temple near our hotel.</a>
    <a id="c02" class="camera">There is a nature trail that gives haunted tours at dusk every Tuesday and Thursday. Highly recommended!</a>
    <a id="c03" class="camera">See how this works. Everything between the a should be a pop up, including anything with an <img src="images/example.gif" alt="example"/></a>
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Junior Member
    Join Date
    Nov 2006
    Posts
    20
    Member #
    14246
    I'm not good at all the codeing yet. I use a page builder for my site.
    Let me see if I understand.
    I use the position of the image to make a pop up for it? Like camera c01 is on line 159 and 1156 so it would be
    #c01 {left: 159px; top: 1156px;}
    And an orange box which I call boxo or boxosmall
    would be described as
    a.boxo
    and
    a.boxosmall
    then it would be by location also
    How do I give each item an a. class?

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I'll back up a bit... CSS allows you to define three things: elements, ids and classes.

    An element is an html tag, e.g. body, ul, a, etc.
    An id is used to define a unique part of a layout; it is defined with a # in CSS, so #c01
    A class is used to define something recurring; it is defined with a . , so .camera

    That segues nicely to my next point that these things can be combined. When combining these things, make sure to keep them in heirarchical order (this will match the HTML).

    In the example above, the only combination is the a (element) with the camera (class). It can get a lot deeper. Incidentally, the a element allows for the pseudo-classes defined with a : ie a:link or a.camera:link
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Now on to your question...

    First of all, I'd recommend going into code view and doing it manually. You'll have a lot more control of what you are doing, and you'll learn a lot, and I'm going to give you everything you need to do it!

    You want to think of each thing you are doing as its own piece of CSS.

    :hover is a pseudo class, that's how you do rollovers. In older versions of IE, pseudo classes can only be applied to the a. So piece 1 - a element, this includes all the pseudo classes.

    Since you do not want this to apply to all the a's throughout the page, you add a class to the a, that's piece 2.

    Next, you want each to have it's own position, that would be the id, each is unique and there are as many as necessary.

    I'm thinking about this, and I'm going to modify it from what I said the other day. Let's start by adding another piece... the map. I'm thinking this will be better to show the combining I was talking about earlier.

    CSS:
    Code:
    #map
    #map .camera {position: absolute; display: block; width: of the camera in px; height: in px;}
    #map .camera a:link {display: none;}
    #map .camera a:hover {display: block; height & width or padding in px}
    
    #map #c01 {left: 99px; top: 33px;}
    #map #c02 {left: 55px; top: 22px;}
    etc.
    HTML is basically the same except for the addition of the #map div.
    HTML Code:
    <div id="map">
    <a id="c01" class="camera"><img src="images/temple.jpg" alt="temple"/> This is the photo of the Temple near our hotel.</a>
    <a id="c02" class="camera">There is a nature trail that gives haunted tours at dusk every Tuesday and Thursday. Highly recommended!</a>
    <a id="c03" class="camera">See how this works. Everything between the a should be a pop up, including anything with an <img src="images/example.gif" alt="example"/></a>
    </div>
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com