Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Magnifying glass image inside a search field 1
- Thread starter tinapa
- Start date
Perhaps you ca show us an example?
Do you want to magnify the contents of a search field, or do you want to just have an image of a magnifying glass there?
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Do you want to magnify the contents of a search field, or do you want to just have an image of a magnifying glass there?
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Ascalonian
Programmer
Hope this helps. I just found some image online to use since there is not a windows cursor for the magnifying glass.
Code:
<html>
<body>
<input type="text" size="50" id="textField" style='cursor: url("[URL unfurl="true"]http://www.ci.san-pablo.ca.us/main/virtual_tour/graphics/zoomin.gif"),url("http://www.ci.san-pablo.ca.us/main/virtual_tour/graphics/zoomin.gif"),auto;'/>[/URL]
</body>
</html>Do you mean you would like the magnifying glass as a background image like the ones used in certain navigation toolbars for browsers?
If so you just need a small image of a magnifying glass and then use reference it.
If so you just need a small image of a magnifying glass and then use reference it.
Code:
<input type="text" size="50" id="textField" style="background-image:url(file:name.jpg)"/>Ascalonian
Programmer
Good point... I guess I read their question as having a mouse over effect. Could mean multiple things.
BillyRayPreachersSon
Programmer
One 'gotcha' with putting a BG image in a search field (whether at the left or right) is that in some major browsers, when the text starts scrolling in the field, the image scrolls with it.
This is seen by many people as undesirable - from both an accessibility/usability issue and from an aesthetic one.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
This is seen by many people as undesirable - from both an accessibility/usability issue and from an aesthetic one.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
To solve the scrolling problem I would place a magnifying glass image on the left, an un-styled textbox on the right (i.e. border: 0; etc) and give the containing box (which contains the image and the textbox) a border to make it look like a standard textbox.
Chris
Chris
Cheat.
I've not tested this, just typed it straight in here, but I hope it gives you a clue as to how to approach it.
Something like that anyway. As you can see I've put a container around the search box and put the Magnifier image as a background to that container. In addition I've removed the border on the input element to make it 'invisibile'.
That's the theory anyway
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
I've not tested this, just typed it straight in here, but I hope it gives you a clue as to how to approach it.
Code:
<div id="srchcontainer">
<input type="text" id="srch" name="srch" />
</div>
CSS:
#srch {
width:150px;
margin-right:5px;
border:none;
background-color:#fff;
}
#srchcontainer {
width:170px;
background-image:url(images/15pxMagImg.gif) right center no-repeat;
}Something like that anyway. As you can see I've put a container around the search box and put the Magnifier image as a background to that container. In addition I've removed the border on the input element to make it 'invisibile'.
That's the theory anyway
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
-
1
- #9
crazy888s
Technical User
- Jun 24, 2003
- 144
You can easily accomplish this without the need of any extra DOM elements. Try putting a background-url directly on the input box, positioned left center. Then add padding-left to the input box so that the text will not overlap the background. For example:
html:
<input type="text" id="inputId">
css:
#inputId{
background-position: left center;
background-image: url( background-repeat: no-repeat;
padding-left:16px;
}
Aye,
Adam
- The fastest way to snag your tickets.
html:
<input type="text" id="inputId">
css:
#inputId{
background-position: left center;
background-image: url( background-repeat: no-repeat;
padding-left:16px;
}
Aye,
Adam
- The fastest way to snag your tickets.
BillyRayPreachersSon
Programmer
Assuming you are OK with the image moving in some browsers, of course!
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
crazy888s
Technical User
- Jun 24, 2003
- 144
If you add overflow:hidden; to the input element, that will take care of _some_ of those browsers (like Firefox. IE is again on it's own here). But you are correct BillyRayPreachersSon
Adam
- The fastest way to snag your tickets.
Adam
- The fastest way to snag your tickets.
Or you could add a single DOM element and have it work everywhere.
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
In fact it's not even necessarily an extra element since the input element should be within a block level element anyway.
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
Hence the word "necessarily".
I'm not advocating littering the markup with extra elements simply to achieve an effect. But ultimately I don't feel it's unacceptable to do so in one or two instances if this speeds up and 'bulletproofs' a design.
Equally it might be acceptable to not include IE6 or worry about the effect not working.
It's a matter of "real world practicallity" vs "theoretical utopia".
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
I'm not advocating littering the markup with extra elements simply to achieve an effect. But ultimately I don't feel it's unacceptable to do so in one or two instances if this speeds up and 'bulletproofs' a design.
Equally it might be acceptable to not include IE6 or worry about the effect not working.
It's a matter of "real world practicallity" vs "theoretical utopia".
Tek-Tips Forums is Member Supported. Click Here to donate
<honk>*:O)</honk>
Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
BillyRayPreachersSon
Programmer
Absolutely - I'm not saying the OP needs to worry about the image scrolling - just pointing out that it will happen so they can manage any expectations / QA.
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
- Thread starter
- #17
- Status
Similar threads
- Locked
- Question
- Locked
- Question
