Forum Moderators: not2easy
All I would like to do know is overlay 1 of 3 transparent gifs over any of these selected thumbnails. I tried using several different css techniques for these 3 images I would like to overlay but all have failed so far! Any help or input would be so greatly appreciated!
When you say transparent gif, do you mean just a blank image that's transparent... or an actual opaque image, just with a transparent background?
What are you expecting CSS to accomplish for you?
There is nothing in CSS which makes something happen when you click. The closest to that is when you hold the mouse down on something it will trigger, but when you release the mouse, it will return to it's normal (or hovered, if appliciable) state.
[edited by: Xapti at 9:47 pm (utc) on May 5, 2007]
What you want is to change visibility: hidden to visibility: visible. That should keep the iamges around to display instantly.
am having a hard time visualising this one, but I think it sounds like a job for 'CSS Sprites' - or something very similar. The technique would mean that the master image (your whole kitchen) would be one image set as the *background* to one div.
then your different countertops and cabinets could also be be built into the same one large image with spacing to suit.
Now I know this is hard to explain and in this case I do think it needs an image.. so I'm going to link to an example I did so you tell me if at least we're all thinking about the same thing.. if not then I'll edit it out - map [tanfa.co.uk] and the image [tanfa.co.uk] used. - (in the bottom part of that image the "white" is transparent)
In that case it's a map, but imagine the top bit as your kitchen 'shell' and the flag/coloring as your different countertops and cabinets. The entire image is set as the background to the master div which is sized to only show the main part, it never moves
Then your links/thumbnail hovers would work by placing another element (possibly a span) over the top of the master div, that span would be positioned over the appropriate part of the image either the cabinets or the countertop or a combination - you would again define the same background image for the span but you would adjust the coordinates of the background image so it showed the required part of the sprite. The spans would be differentiated between using class names/ID's
You could make this hover work onclick too by using a javascript to toggle the class name of the span which you've placed over the top of the master div.
Most of this guesswork and I'm not too sure of the best way, only you can see how to build the sprite in the first place. I'm presuming you need to be able to mix 'n' match the tops/doors which could get complex with this method unless you build every single combination into the sprite or use two spans one for doors one for tops?
Ok I'm lost now... is any of this making sense? ;)
If not is there any way you could drop in some pseudo code using a table, to tell us what sort of placement and combinations you expect and whether hover or click or both should activate things?
Suzy
Now, I want to go a step further so I actually created different cabinet designs for the above kitchen photo. I created 3 transparent cabinet images to place over the kitchen. It really makes no difference to me (onclick or mouseover) how I overlay this transparent image, I just can't get it to layover the image which is displayed in the <div id=""> block.
In a nutshell, I have a working blending image slideshow. You mouseover a thumbnail and it displays a full image. I would like to use this full image and have 1 of 3 transparent gifs (Cabinet Styles) overlay the full image so they can mix and match different cabinet styles with the countertops.
So essentially you still have the same problem, just with cabnet styles instead of countertops?
Two different solutions were given, are they not good answers?
The way to lay it over is just setting the kitchen as the background image of a div, and then toggling the visibility of your countertop overlay images, which would all have position:absolute;top:0;left:0 so that they are fixed in the same spot. The div must be position:relative so that the images know that that's the parent/ancestor it should compare to for positioning.
If your code toggles the kitchen image as a non-background image, and you don't want to change that code, I suppose that's fine. Just put a container div around that image (which I think you already have?), and then just do the same thing as before... Absolutely position the images top:0;left:0, and make sure the parent div is position:relative.
Toggle visibility:visible visibility:hidden for the images to appear. I think that pre-loads the images (or at least loads them once and only once, which is what you want, right? (no unloading)) but I'm not completely sure.
[edited by: Xapti at 7:51 pm (utc) on May 6, 2007]
I have tried javascript and this seems to work fine for a body background, etc.. but I can't get it to work within that division......thats's why I thought a CSS code would work for me but have had no luck yet.
Here is what I have and is working.
#container {
background:url('images/image.jpg');
width: 400px;
height: 360px;
}So this was what I attempted last but still no results. Maybe this will spark some suggestions.
what I tried
CSS CODE:
#container {
background:url('images/image.jpg');
width: 400px;
height: 360px;
}
#container a.image2{
background:url('images/image2.gif');
width: 400px;
height: 360px;
}
#container a.image3{
background:url('images/image3.gif');
width: 400px;
height: 360px;
}
Now on thumbnails I have this...
<a href="#" class="image2">thumbnail2</a>
<a href="#" class="image3">thumbnail3</a>
I must be getting close......HELP! Although reviewing what I posted my <a href> tags are not within the <div id=container> so I see why that method isn't working. Anyone have a suggestion? Thanks
I can change cabinet styles within the <div id="container"></div> on the original image but as soon as I replace the image with the blending slideshow, it removes the image......Is there anyway I can have these gifs stay within this area when the blending slideshow is functioning.
Again, the main function of this <div id="container"></div> area was for the blending slideshow but I want to be able to have these gifs remain as an overlay if toggled. Gotta be a way around this.
I have a thumbnail viewer when mouseover a thumbnail it enlarges a photo in <div id="container">LARGE IMAGE</div>
This container unloads previous image and loads new ones as mouseover occurs. Is there anyway with CSS I can overlay a transparent .gif within this <div id="container"><div> and have it remain while still using the thumbnail viewer?
Please Help!
anyone any fresh ideas?
