Adding alt text to images with firebug

Question

Can somebody please tell me how to add alt text to images on firebug?

Answer 1

Inspect the image with Firebug then right click the element and do add attribute that will allow you to add an alt attribute which is the alt text. But just wondering what exactly are you trying to accomplish as you can save work out of firebug.

Firebug is only a client side editor it will not allow you to get work back onto your site. You can test edits just for you with firebug when you are happy make the same changes in the HTML file you are viewing.

In your case you will need to look at the shopping carts html and find the img tag you want to edit then add the alt attribute there.

Answer 2

You can use the element inspector from the Firebug control panel (2nd icon from the top left of the menu, next to the firebug logo icon). Click on that, then on the image you want to edit. Then in the right-hand pane, select the DOM tab, and find the alt attribute. Double-click the value field, and enter the alt value you'd like.

Any changes you make in Firebug aren't permanent of course, and disappear when you refresh the page. You'll have to copy them into the HTML to save them.

Answer 3

I answer to your comments, not to your main question, correctly answered above and not useful to your need...

In Firefox, you don't do Inspect image to get its URL, as you saw, but select Properties: it will give you full path, under Image Properties if there is a link on the image (like on the Stack Overflow logo at the top of this page as I write: I can see http://sstatic.net/so/img/logo.png URL).
Unless the image is defined in CSS, ie. as background, making it harder to find out (Firebug can help here).

Beside, your shopping cart page is probably defined in a template (you haven't told us what software you use). For example, in Zen Cart, you can find a file at <root of shop>/includes/templates/template_default/info_shopping_cart/tpl_main_page.php but it can be instead in <root of shop>/includes/templates/<some template name>/info_shopping_cart/tpl_main_page.php if you use another template. And the part of interest can actually been in another file which is included by the main file, or even, if coding is a bit sloppy, hard-coded in some PHP (or other language) file...

In this case, once you located the image in Firebug, look around: does your image, or some tag near it, have an ID? Or some class, eg. class="banner leftside"?
Searching a fragment of HTML like this with some recursive grep facility can help in locating the file to change. With some traps, since for example classes can be generated too (ie. you can find in the code something like: class="banner <?php echo $columnSide; ?>").

And follow the instructions on customizing your cart (if any). If well made, it offers to created a custom template by copying only the changed files under another folder. You must avoid, if possible, to modify the files provided out of the box, as they can be overwritten when upgrading the software.

HTH.

Answer 4

Using firebug find something specific in your shopping card code. Like an id=<something special> or class=<something special> near that image.

Then search for this <something special> in your project. That will give you the place where alt should be put.

PS If you're unsure which <something special> to choose, paste here some context of your page (because the link you gave isn't readable from outside).

PPS To search in a number of files, click 'Start'->'Search'->'For files and folders'->'A word or phrase in a file' and choose the directory of your project.