?
Solved

Capitalize the the title tag of an image

Posted on 2010-09-03
7
Medium Priority
?
433 Views
Last Modified: 2012-05-10
Can straight css capitalize the the title tag of an image?If so, how?

If not can jQuery do this? If so, how?

Ta, Luv2.
0
Comment
Question by:Luv2Muff
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 33598157
You can't do this with CSS.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33598333
one of the ways.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
	$("img").each(function(){
		$(this).attr("title",$(this).attr("title").toUpperCase());
	});	
  });
  </script>
  <style type="text/css">
  img{
	width:300px;
	height:200px;
  }
  </style>
</head>
<body>
<img src="http://www.costpernews.com/wp-content/uploads/2007/04/google_logo.jpg" title="google"></img>	
<img src="http://www.amitbhawani.com/blog/Images/B/Bing-Logo-White.jpg" title="bing"></img>	

</body>
</html>

Open in new window

0
 

Author Comment

by:Luv2Muff
ID: 33603491
Thanks that is great and works a treat.

Ideally I would just like to capitalize just the first letter of each title. I'm aware of :first-letter but unsure if that can be made to work with a title, or if there is another way?

Ta, Liv2.
0
Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

 

Author Comment

by:Luv2Muff
ID: 33603508
Thanks that is great and works a treat.

Ideally I would just like to capitalize just the first letter of each title. I'm aware of :first-letter but unsure if that can be made to work with a title, or if there is another way to achieve this?

Ta, Luv2.
0
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 total points
ID: 33603633
one of the way s like this...

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
	$("img").each(function(){
		var title = $(this).attr("title");
		title = title.charAt(0).toUpperCase() + title.substring(1);
		$(this).attr("title",title);
	});	
  });
  </script>
  <style type="text/css">
  img{
	width:300px;
	height:200px;
  }
  </style>
</head>
<body>
<img src="http://www.costpernews.com/wp-content/uploads/2007/04/google_logo.jpg" title="google"></img>	
<img src="http://www.amitbhawani.com/blog/Images/B/Bing-Logo-White.jpg" title="bing"></img>	

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Luv2Muff
ID: 33603651
Perfect, thank you!
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33603656
Thanks, Have a nice day.

$kadaba
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month11 days, 5 hours left to enroll

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question