Skip navigation
nnord2
Currently Being Moderated

Want to create a collage of overlaping images in Dreamweaver

Jun 15, 2013 9:54 PM

Hi,

I'd like to create a collage of overlapping images in Dreamweaver.

I have searched high and low for something like Layers to do this, but haven't discovered anything.

I can build the collage with the look I want in Fireworks, but then that single image is quite large, and I am concerned that would be a problem.

Here is a link to my page in progress - currently showing the large the Fireworks image.

http://www.cougarmountainproductions.com/NNordstrandNEW/Site-Sculpture /HomePage-1.htm

 

I'm not great at code, but I'm

Using Windows 7

Dreamweaver CS6 (plus the suite)

 

Can anyone tell me -

Is it possible to overlap images in Dreamweaver?

If so - can you tell me what tools/process I am looking for so I can research  more?

 

Thanks!

Nancy

 
Replies
  • Currently Being Moderated
    Jun 15, 2013 11:30 PM   in reply to nnord2

    Hello Nancy,

     

    to my knowledge "no". This job is resolved by using image processing applications such as Adobe Photoshop. Here it is possible to overlap and/or use different layers, as I did with some of your images:

     

    Gesamttest.jpg

     

     

    Naturally you can use your image too in in conjunction with hot spots, as you did it already.

     

    And may I draw your attention to this:


    <area shape="rect" coords="660,2270,958,2500" href="file:///C|/Users/Nan's/Documents/NNordstrand  ...

     

    These pathes (file:///C|/) are pointing to your hard drive. Please control them and let DW insert the right ones.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 12:13 AM   in reply to nnord2

    Hello Nancy,  look at this page and see if this helps. http://zurb.com/playground/css3-polaroids  With some tweeking you should be able to get the results you're looking for.

     

    David G. Yocum

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 9:31 AM   in reply to nnord2

    Yes you can overlap images using a combination of absolute positioning (for positioning) and z-index (for the layer). You can even do the rotate with CSS transforms.

     

    However this is not Dreamweaver specific rather than coding and styling.

     

    Take a look here as an example >> http://dev.craigomatic.co.uk/absolutely/

     

    If you want here's the magic spells...

     

    The HTML

     

    <div>

              <img class="image1" src="placeholder-thumb1.png" width="140" height="140" />

              <img class="image2" src="placeholder-thumb2.png" width="140" height="140" />

              <img class="image3" src="placeholder-thumb3.png" width="140" height="144" />

    </div>

     

     

    The CSS

     

    div {

              position: relative;

              background-color: #CCC;

              width: 350px;

              height: 350px;

              margin: auto;

    }

    .image1, .image2, .image3 {position:absolute;}

     

    .image1 {left:50px; top:50px; z-index:1;}

    .image2 {left:100px; top:100px; z-index:3;}

    .image3 {left:150px; top:150px; z-index:2;}

     

    .image2 {

              -moz-transform: scale(1) rotate(15deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

              -webkit-transform: scale(1) rotate(15deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

        -o-transform: scale(1) rotate(15deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

        -ms-transform: scale(1) rotate(15deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

        transform: scale(1) rotate(15deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

    }

     

    Note: the roted image does not work in Explorer 8 and below without even more jiggery pokery.

     

    Here's how it works.

     

    The parent div is given a relative position (a point of reference)

     

    Each image within it is given an absoloute position (this means it will go exactly where you want it with the top left of the parent div being 0

     

    So where I write left:100px top:100px that means 100pixels from the top left of the parent div and 100 down.

     

    To force layering we use the z-index. By default everything is on layer 0 so a higher number means a higher layer.

     

    You can still have images with links as the image over the top cancels out the one below.

     

    As you can see rotating images is stepping up a level.

     

     

     

    Craig

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 9:12 PM   in reply to ctrl/z

    Hello Craig,

     

    great compliment! Naturally I had to try out your - in my eyes very interesting and "innovative product" -, which works great in my IE10. And in order to go to threshold values,  I used 11 images.

     

    And now comes my single objection. In the case of using more images (you showed it with three) you have to work hard to change all the necessary parameters, before you will be able to present a stylish and appealing design.

     

    Only in this case I for my part will furthermore prefer to let work my old fashioned image processing application as I wrote above.

     

    But again, many thanks for your really valuable input!

     

    Hans-Günter

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points