Jump to content


Photo

Modal Window: Image On Top Of Another Image


  • You cannot start a new topic
  • Please log in to reply
12 replies to this topic

#1 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 11 November 2017 - 04:59 PM

I have a modal window in which one .jpg file fills the whole window, like this:

landscape%20in%20modal.png

 

Is there a way to add a button link so it appears on top of the existing image? something like this:

landscape%20with%20button.jpg

 

I know how to create the button link, but not how to place it 'on top of' the image when the image is in a modal window.



#2 Phzzz

Phzzz

    Phzzz izzz a Nugatory and Totally Insignificant Peon!

  • Administrators
  • 1,006 posts
  • LocationNew York

Posted 12 November 2017 - 09:45 AM

Use the css z-index property, Beau. The higher the z-index the closer to the front an element (including an image) will appear. If for instance, your modal image has an assigned value of z-index:1 then your button image that you want to appear on top of it should have an assigned value of z-index:2.  

 

More about that here:  Stacking elements with Z-index


Please don't Email or Message me for help/support. Instead, either start a NEW TOPIC or post a REPLY in the appropriate thread in these forums. This will also benefit others who may have a similar question or problem. And please read the rules for Private Messaging. - Phzzz (aka Scruffy; aka Nunzio; aka Tom)


#3 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 12 November 2017 - 03:41 PM

Thanks Phzzzz! I'll get to work on it :1thumbsup:


  • Phzzz likes this

#4 Phzzz

Phzzz

    Phzzz izzz a Nugatory and Totally Insignificant Peon!

  • Administrators
  • 1,006 posts
  • LocationNew York

Posted 13 November 2017 - 01:17 AM

Very good, Beau!  :1thumbsup:

Here's a working example I whipped up, based on the article I referenced, where whatever image is on top (the highest z-index value) will link back here to this thread in SAF, acting as the "button" image link you are looking for. Click: Stacking elements with Z-index Example


Please don't Email or Message me for help/support. Instead, either start a NEW TOPIC or post a REPLY in the appropriate thread in these forums. This will also benefit others who may have a similar question or problem. And please read the rules for Private Messaging. - Phzzz (aka Scruffy; aka Nunzio; aka Tom)


#5 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 13 November 2017 - 01:57 AM

Tom, you're a prince!

Using Firefox's Tools > Web Developer > Page Source I grabbed index.html . . then using Tools > Web Developer i was able to get style.css . . . but I was unable to replicate your page, I'm afraid I'm still so much of an amateur this kind of stuff still baffles me :(

Then I looked at Debugger and saw index1.html, but I've never heard of an index1.html file.

Alas, I'm out of my depth :blush: 

 

If it's not too much trouble could you send me all the files? Maybe then I can get an idea of it.

But I hate to think of your spending any more time on it, it must have taken you some time to write up the code!


  • Phzzz likes this

#6 Phzzz

Phzzz

    Phzzz izzz a Nugatory and Totally Insignificant Peon!

  • Administrators
  • 1,006 posts
  • LocationNew York

Posted 13 November 2017 - 02:42 AM

It didn't take too long to write the code, Beau.  It's pretty straightforward.  ;)

I've zipped up all the files for you.  You can grab the ZIP file here:  stacking-elements.zip

There are 9 files within the archive you can reference as a guide... 
index.htm (the HTML index file you run)
index1.html and index2.html (although I could have named them anything and so can you but you will be creating only ONE file in your case) - one contains code to stack the diamond on top and make it clickable; the other to stack the heart on top and make it clickable. Each displays within the same targeted iframe in index.htm.

There are two style sheets - style1.css and style2.css (each sets the z-index values for all 4 images)

There are four images - diamond.png, spade.png, club.png, and heart.png. Whichever you specify as the "button" will have the highest z-index value and be on top.

 

Now... you do NOT need to apply both stack orders for your purpose.  Instead of 4 images, you will have 2 - your modal background image and your button image (clickable link), and only 1 style sheet. Just make certain that your "button" image has a higher z-index value than your modal image. I only created 2 stack orders to show how either the heart or the diamond can be z-indexed to the top (higher value) and could therefore be made into a clickable link. If you try to create a link with any image with a lesser z-index value it will not work. The topmost image can be a link (button in your case). 


Please don't Email or Message me for help/support. Instead, either start a NEW TOPIC or post a REPLY in the appropriate thread in these forums. This will also benefit others who may have a similar question or problem. And please read the rules for Private Messaging. - Phzzz (aka Scruffy; aka Nunzio; aka Tom)


#7 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 13 November 2017 - 01:11 PM

Cool! I've downloaded/unzipped the files and had a quick peek at the code, and I'll get to it some more as the day progresses :D



#8 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 13 November 2017 - 04:30 PM

I've tried to modify your code so that it would be like my modal window, with just two images . . and I got it with two images . .
and I was able to remove the choice of what would be on top, since I wouldn't be giving the user that choice, and I was able to do that . .
and I've substituted my own images for the behind image and for the club . .
and substituted my own link URL . .

but then I couldn't figure out how to make the behind image take up the whole viewport. :confused:  If I could do that, then maybe I could try to put it all in a modal window.



#9 Phzzz

Phzzz

    Phzzz izzz a Nugatory and Totally Insignificant Peon!

  • Administrators
  • 1,006 posts
  • LocationNew York

Posted 13 November 2017 - 07:27 PM

Hmmm... Something like this, Beau?  

Click: Full Viewport Image in a Div Container

It only uses 2 images and only 1 web page so yes, I'm 99.99% certain that this would be exactly what you want. Let me know.

Please don't Email or Message me for help/support. Instead, either start a NEW TOPIC or post a REPLY in the appropriate thread in these forums. This will also benefit others who may have a similar question or problem. And please read the rules for Private Messaging. - Phzzz (aka Scruffy; aka Nunzio; aka Tom)


#10 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 13 November 2017 - 10:33 PM

. . . but it's inside a modal window that I'm trying to have one image appear on top of another.

 

In just barebones HTML, the first image listed appears underneath the second listed:

<HTML>
<HEAD>
<TITLE>POSITION ONE IMAGE ON TOP OF ANOTHER</TITLE>
</HEAD>
<BODY>

<!-- The first image listed in html appears behind the second listed. The second image must be .png - transparent - for the first to be seen behind the second  -->

   <img src="landscape.jpg" width=100% height=100% />
   <img src="whatever image.png" style="position: absolute; top: 200px; left: 60px;"/>  


</BODY>

</HTML>

 

Here's how that looks:

SECOND%20OVER%20FIRST.png

 

But inside my modal window <div>, the second appears below the first in stead of on top of it:

in%20modal%20window.png

 

Is that maybe because my style.css is effecting things?

 

Give me some time before you reply (don't want to waste your time), I'll build a barebones HTML with no stylesheet and see what happens with two images in a modal window . . . but I won't be able to get that to you until tomorrow.



#11 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 14 November 2017 - 01:54 PM

Hi Tom ~
Well, I've just spent a lot of time tryiing to work with simple modal window and I just can't seem to get the hang of it. I googled "basic modal window html" and tried to build a simple page with the code from several sites and couldn't get anything to work wallbash.gifWALLBASH.GIF

So I'm going to have to give it up and get back to work I've been letting go. I really don't want to ask you to spend more time on this, I'm just afraid of not being able to implement new suggestions since I haven't been able to grasp what you've already given me shootmyself.gif



#12 Phzzz

Phzzz

    Phzzz izzz a Nugatory and Totally Insignificant Peon!

  • Administrators
  • 1,006 posts
  • LocationNew York

Posted 18 November 2017 - 02:58 PM

Beau...

 

I haven't been able to post till now, but you did tell me to give you some time and I did.  ;)

I see you're frustrated because you can't implement it within a modal window, so I've done that for you. In this new example there are only 3 files needed... The index.html file and 2 images.

Of course it would be MUCH more helpful for me to understand exactly what you need if I had access to your files, same as I did for you when I gave you the files you needed.  So, if you STILL have difficulty implementing what I have now done, then I will definitely need your files so I can examine your CSS and other code you are using and make the necessary changes.

 

Anyway, here is an example I uploaded for you.  Ignore the other example I showed you for now and look at the source code for this...

Click:  CSS Fullscreen Modal Example


Please don't Email or Message me for help/support. Instead, either start a NEW TOPIC or post a REPLY in the appropriate thread in these forums. This will also benefit others who may have a similar question or problem. And please read the rules for Private Messaging. - Phzzz (aka Scruffy; aka Nunzio; aka Tom)


#13 beau

beau

    Valued Member

  • Gold Star Member
  • Pip
  • 610 posts

Posted 18 November 2017 - 05:11 PM

Beautiful! I substituted my own bj.jpg and button.png, everything worked fine.

 

BTW, when I saved the css (via the style editor) I saved it as "style-1.css" and that worked fine, then as a test I changed that name to "style1.css" it still worked, so I guess I just got lucky ^_^  . . so then I changed it to "style-whatever" and it still worked, so . . ignorance is definitely bliss :P 

 

Then I had fun fiddling around with the html and css . . I'm such an amateur at this stuff I hadn't known that style.css code could be put in index.html, my fiddling got me nowhere but at least familiarized me a bit with how that can be done. Is there a reason for putting the styling code in html instead of a style.css file?

 

What I'll do now is try to re-create your code in my own modal, but I'm sure that's going to require some time, plus Thanksgiving's coming up so I'll be away from the infernal machine for 5 or 6 days, so you might not hear back from me for a while :unsure:

If you want to have a look at the modal window I'm trying to put the button in, click the "Help!" button at the prototype site. The Reddit button you'll see is just photoshopped in, it's where I'm hoping to be able to put in a real button link.

 

 

Tom, you are so kind . . and patient! :yes:  . . . most people would have given up on me long ago :rolleyes: 

Thanks! :cheers 2: