Log in

View Full Version : Customize img alt tag ?


Cheng
03-28-2009, 08:06 AM
Hi.

Can someone of you guys please tell me if it is possible to change the size of img alt tags in Dreamweaver?

If yes, how do I do it?

Thanks in advance,
bluewalrus
03-28-2009, 04:44 PM
Not sure if this will work in all browsers but....


img {
color:#0000FF;
font-size:36px;
}


<img src="where'smyimage?.jpg" alt="TEST">
Cheng
03-29-2009, 01:57 AM
.......thanks a lot for your reply.

I'll check it out later on and post back the results.

Thanks again,
Cheng
03-30-2009, 05:57 PM
.......I tried it out but it didn't work.

At least not in IE7..

The thing is that it should work in IE7 even though all web designers don't like this browser very much but it's still the most used one worldwide.

Another suggestion would be very much appreciated.

Thanks again.......
Schmoopy
03-30-2009, 06:16 PM
I don't think it's possible, I'm pretty sure it's coded in with the browser.

Besides, the alt tag doesn't even show up in Firefox, it's the title tag that is used instead. Unless you've seen a page where they've successfully done it.
Master_script_maker
03-30-2009, 08:28 PM
maybe an alternative? http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
Cheng
03-31-2009, 03:33 AM
maybe an alternative? http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

.......thanks a lot for the link.

Not exactly what I was looking for but this could be an option.

I'll check it out and see how it works.

Thanks again very much.......
Lpe04
03-31-2009, 03:39 AM
I don't think it's possible to change the size of the alt tag, not unless there is a specific browser command
bluewalrus
03-31-2009, 03:54 AM
My solution works in opera for color, firefox and flock for color and size. I'm on a mac though might be different in pc land.
codeexploiter
03-31-2009, 04:28 AM
If you set font related CSS properties set for the img elements it works for Firefox and Flock based and in Opera also for me. Rather I think it is based on the JavaScript engine the browser support.

In IE the color of the alt text can be controlled but nothing else.
Cheng
03-31-2009, 10:48 AM
.......thanks for all of your replies.

It seems to be an IE7 issue only.

Did anyone of guys had a look at IE8 ?

Does the new browser comes up to the standard of i.e. Firefox and the other browsers?

Thanks again........
bluewalrus
04-01-2009, 01:13 AM
Why are you trying to style the alt text? Why not just fix the image, or put in the text itself?
Cheng
04-01-2009, 02:17 PM
Why are you trying to style the alt text? Why not just fix the image, or put in the text itself?

.......I didn't want to put a text description underneath the image so I thought I might customize the font size of the img alt tag.

Anyway, by now I managed to do it without that but it is still interesting to know if it could be done but apparently it isn't at least not for IE7.

Thanks a lot to all of you for your feedback.

I really do appreciate it.......
bluewalrus
04-03-2009, 10:29 PM
But the alt doesn't show up unless the image isn't there or for text readers and robots.
ganeshseo
04-09-2009, 06:36 AM
i am not sure. my thinking is it is not possible to change the size of img alt tags in Dreamweaver
amutha
04-10-2009, 07:31 AM
i am not sure. We can minimize the img size, but img alt tag size ... :confused:. If you give the alt tag content in small, may minimize the content..............
amutha
05-05-2009, 11:04 AM
hi
i'm trying this img tag size for example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title><style type="text/css">

#dhtmltooltip{
position: absolute;
width: 200px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>
</head>

<body>
<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com', ' red','500')";
onMouseout="hideddrivetip()">Search Engine</a>
</body>
</html>

if you want change the size,
Its working firefox, mozilla, but not working in IE

Thanks