Add Two images over a bigger one.

Dragosvr92 · October 14, 2011

Ok, so i have a ....

In the bottom right of a 468x60 image, I would like to add two small images about 16x16, each with a link on it.

It would be nice to have the 468x60 image as a background.

Does anyone have any idea how to do that?

I have no clue on how to do it myself... >:(

AyKay47 · October 14, 2011

you will want the large image to either be position: static (default) or position: relative;

you can make the two little pictures position: absolute and locate them wherever you want..

you also might want to incorporate a z-index here as well..

Dragosvr92 · October 14, 2011

Ok, i understanded that. but how do i set the position?

it is absolute etc.... but it has to be absolute somewhere..... bottom, top etc.

And, should i use them all as backgrounds?

Dragosvr92 · October 14, 2011

I have just made this messy code .......

How may i make the small icon to stay ONLY Inside the main image?

<style>

<!-- 
#BigBanner{
background-color:green;
width:468;
height:60;
}

#Small{
background-color:red;
width:16;
height:16;
position:absolute;
right:690px;
bottom:600px;
}

-->
</style>


<a href="http://TEST.COM">
<div id="BigBanner">

<a href="http://TEST.COM"><div id="Small"></div></a>
</div>
</a>

Dragosvr92 · October 15, 2011

No one replyed :'(

I can figure it out how to arrange the little icons. But i dont know how to make the 468x60 image to be the main body.

So that what i put in it, wont get outside it.

<style>
<!-- 
#BigBanner{
background-color:green;
width:468;
height:60;
cursor:pointer;
}

#Small{
background-color:red;
width:16;
height:16;
position:absolute;
right:690px;
bottom:600px;
}

#Small:hover{
border-style:solid;
border-color:#98bf21;
}
-->
</style>

<div id="BigBanner" onclick="location.href='{U_INDEX}';">
<div id="Small" onclick="location.href='{U_INDEX}';"></div></div>

teynon · October 15, 2011

<html>
<head>
<style>
<!-- 
#BigBanner{
background-color:green;
width:468;
height:60;
cursor:pointer;
position: relative;
}

#Small{
background-color:red;
width:16px;
height:16px;
position:absolute;
right:0px;
bottom:0px;
}

#Small:hover, #Small2:hover{
border-style:solid;
border-color:#98bf21;
}

#Small2{
background-color:red;
width:16px;
height:16px;
position:absolute;
right:18px;
bottom:0px;
}
-->
</style>
</head>
<body>

<div id="BigBanner" onclick="location.href='{U_INDEX}';">

<div id="Small2" onclick="location.href='{U_INDEX}';"></div>
<div id="Small" onclick="location.href='{U_INDEX}';"></div>

</div>

</body>
</html>

Dragosvr92 · October 16, 2011

Thank You very much teynon !

But there is a small issue.

All the links from the divs go to the main id, BigBanner.

i cant add links on the other 2 buttons :-\

teynon · October 16, 2011

<html>
<head>
<style>
<!-- 
.container {
width: 468px;
height: 60px;
position: relative;
}
#BigBanner{
background-color:green;
width:468;
height:60;
cursor:pointer;
position: absolte;
z-index: 1;
}

#Small{
background-color:red;
width:16px;
height:16px;
position:absolute;
right:0px;
bottom:0px;
z-index: 10;
}

#Small:hover, #Small2:hover{
border-style:solid;
border-color:#98bf21;
}

#Small2{
background-color:red;
width:16px;
height:16px;
position:absolute;
right:18px;
bottom:0px;
z-index: 10;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="BigBanner" onClick="location.href='test1.html';"></div>
<div id="Small2" onclick="location.href='test2.html';"></div>
<div id="Small" onclick="location.href='test3.html';"></div>
</div>

</body>
</html>

Dragosvr92 · October 16, 2011

Thanks alot again!

my last question would be if theres a way to add the dotted border that usually appears on the <a> element, when keeping the click pushed. If you dont know how, thats fine. Thank you very much again for your help.

teynon · October 16, 2011

I don't know what dotted line you are referring to, but you could always use :active in css:

<html>
<head>
<style>
<!-- 
.container {
width: 468px;
height: 60px;
position: relative;
}
#BigBanner{
background-color:green;
width:468;
height:60;
cursor:pointer;
position: absolte;
z-index: 1;
}

#Small{
background-color:red;
width:16px;
height:16px;
position:absolute;
right:0px;
bottom:0px;
z-index: 10;
}

#Small:hover, #Small2:hover{
border-style:solid;
border-color:#98bf21;
}

#Small:active, #Small2:active, #BigBanner:active {
border: 3px dotted #98bf21;
}

#Small2{
background-color:red;
width:16px;
height:16px;
position:absolute;
right:18px;
bottom:0px;
z-index: 10;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="BigBanner" onClick="location.href='test1.html';"></div>
<div id="Small2" onclick="location.href='test2.html';"></div>
<div id="Small" onclick="location.href='test3.html';"></div>
</div>

</body>
</html>

Dragosvr92 · October 16, 2011

I meant the outline property. What you said helps

Another thing....... is it possible to use the <img> tag and a 1x1 pixel image, over the background, instead of a div?

I appreciate all your help

teynon · October 16, 2011

You can use any block element. So yes, you can use img.

Dragosvr92 · October 16, 2011

Well this wont work:

<img class="container">
<img src="pixel.png" id="BigBanner" onClick="location.href='test1.html';"></img>
<img src="pixel.png" id="LinkE" onclick="location.href='test2.html';" title="Link on placed banner"></img>
<img src="pixel.png" id="ContactL" onclick="location.href='test3.html';" title="Contact"></img>
</img>

Cant put <img> tags in another :-\

teynon · October 16, 2011

</div>

Dragosvr92 · October 16, 2011

Damn im stupid, i added the img tag over the container for nothing >:(

Thank You !

I got it working. I'll get back to you if im stuck anywhere, thanks again for your time.

Sign In

Add Two images over a bigger one.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information