Need Help!

18 posts Page 1 of 2
Contributors
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Need Help!
Master M1nd
ASSLAM-O-ALAIKUM | HELLO GUYS!


Well I Need help! In blogger template! ( I have 2 questions ) .

1st = I Know How to place hover Images in Html! We Have to give the link of Both Images. ( LINK OF SIMPLE IMAGE WITHOUT HOVER And The link of the image that should display when we hover our mouse on it ).

But I see on some blogger templates,
They just have put this only image Image

It has 3 Icons ( BLOGGER SIMPLE + HOVERED | HOSTGATOR SIMPLE + HOVERED | CSS3 SIMPLE + HOVERD ).

And he have only placed this! and when ever he hover the mouse on one of it, Only the one, on which the mouse is change it's color! ( HOW It's POSSIBLE ? ) It's a simple .png file, with 3 different Icons and they do not change colors at same time! They one by one change color ( WHEN MOUSE IS HOVERED ).

============================================

2nd = I want my footer be like this ( means Adding small icons which hover instead of Powered by Blogger etc )

Image = Image

The Current Coding of My Blogger Template Footer =

Image

Which Looks like = Image




I Hope you guys understand my problem! Please help ^_^.
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Need Help!
comathi
1.

That's because they used the "background-position" property for the images. It enables you to display only part of an image instead of the whole thing.

So, for example, let's say the icons you posted are in an image called "icons.png" and that each icon is 50px by 50px. Now lets pretend you want to put one of those icons (and its hover variant) as the background of a link. You would to this:
Code: Select all
#your-link
{
height: 50px;
width: 50px;
display: block;
background: url('icons.png') 0 50px;
}

#your-link:hover
{
background: url('icons.png') 0 0;
}
Code explanation
First of all, we set the height and width of our link to 50px (or the dimensions of each individual icon).

After that, we set the background image for the link. I said earlier we'd be using a file named "icons.png". After the filename, though, you'll notice a pair of numbers (0 50px). These are actually coordinates. Put simply, they define the image offset.

In this case, the first icon we want to use is offset by 50px, so we define our y offset as 50px.

When we hover over the link, the offset is now 0 because we're using the very top icon in the file.

================================

2.

To do what you want to do using the image you posted, you can replace the copyright notice by the following HTML code, inside the "copyright-left" element:
Code: Select all
Powered by <a href="#" id="blogger"></a> <a href="#" id="hostgator"></a> <a href="#" id="cssthree"></a>
You would then style it with this CSS code:
Code: Select all
.copyright-left a
{
width: 50px;
height:50px;
display: inline-block;
}

#blogger
{
background: url('icons.png') 0 50px;
}

#blogger:hover
(
background-position: 0 0;
)

#hostgator
{
background: url('icons.png') 0 150px;
)

#hostgator:hover
(
background-position: 0 100px;
)

#cssthree
(
background: url('icons.png') 0 250px;
)

#cssthree:hover
(
background-position: 0 200px;
)
That's all the code you would need. You can add additionnal stuff like margins if you wish, though.

Also, don't forget to replace "icons.png" with the url to your image, and the height and width and offsets to correspond with the dimensions of each icon.

In your case, all of the icons have the same x offset. Only the y offset changes. The width of each icon is the width of your whole image, while the height of each icon is the height of the whole image divided by the number of icons (total height/icons).

If you still need help understanding offsets, I can help you cooll;
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Thank you so much for clearing my concepts! I have created One more Mine!

You can see =

Image


Yea i know it is too big for footer but i have psd file i will make it short!
Can you give me the whole code + coordinates etc By checking my .png file !
I will be very thank full to you :) wahooo;






Last time it happens :P = http://1.bp.blogspot.com/-YlKOV78VITw/U ... 00/LoL.png
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Well let me ask one more question! :)

For Example, this is the image
Image

Whole Image width = 50px
whole image height = 113px

It has A black/white Blogger logo and a colored one!

now if i only want to display the Hovered part! I can use

background-image url('LINK');
width:50px;
height:50px;

It will display the colored one!
But how can i display the other part of the image ( the black and white !, which is below the Colored part ).

because whole Image width = 50 px! ( It's not confusing ).
Whole Image height = 113 px and we only want to display the half of it from down side! ( This is confusing! ).
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm

Re: Need Help!
Filip
Hello,

Try with the code attached.
Or try the live demo here

Hope it helps,
-Filip
You do not have the required permissions to view the files attached to this post.
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Need Help!
mikethedj4
Filip wrote:
Hello,

Try with the code attached.
Or try the live demo here

Hope it helps,
-Filip
Because this is one image you don't need to use it again for hover. All you need to do is adjust the background image's position.
Code: Select all
<!doctype html>
<html>
<head>
<title>Hover demo</title>
<style>
#blogger {
	width: 48px;
	height: 48px;
	background: url('https://dl.dropboxusercontent.com/u/40082347/Code%27N%27Stuff/demo/blogger.jpg') 0 0;
	background-size: 100%;
}
#blogger:hover {
	background-position: bottom left;
}
</style>
</head>
<body>
	<div id="blogger"></div>
</body>
</html>
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Well it's hard to understand, but still i am trying my best to understand and i understand this may 60-70%

But This was for a single Image!
Can you make one for 3 images.
I am pasting the image below!


Image
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm

Re: Need Help!
Filip
mikethedj4 wrote:
Filip wrote:
Hello,

Try with the code attached.
Or try the live demo here

Hope it helps,
-Filip
Because this is one image you don't need to use it again for hover. All you need to do is adjust the background image's position.
Code: Select all
<!doctype html>
<html>
<head>
<title>Hover demo</title>
<style>
#blogger {
	width: 48px;
	height: 48px;
	background: url('https://dl.dropboxusercontent.com/u/40082347/Code%27N%27Stuff/demo/blogger.jpg') 0 0;
	background-size: 100%;
}
#blogger:hover {
	background-position: bottom left;
}
</style>
</head>
<body>
	<div id="blogger"></div>
</body>
</html>
I was testing this my code in school's library which has pretty much obsolete version of IE installed so it didn't work quite well.

Thanks for the tip anyways, rep+

-Filip
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm

Re: Need Help!
Filip
Master M1nd wrote:
Well it's hard to understand, but still i am trying my best to understand and i understand this may 60-70%

But This was for a single Image!
Can you make one for 3 images.
I am pasting the image below!


Image
So you want hover for each image or all together?
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Each Image clapper;
18 posts Page 1 of 2
Return to “Help & Support”