Linked Image with border on hover

I have a page of tiled image that link to project pages on the website. My boss found a website that he likes how the images appear when you hover over them with the mouse. I know of a way to do this, but I'm not sure what the best way would be: 1) create a rollover image that has the first image without a border, and the second image with a border... this seems like it would take the longest but give me the look I want because there are 55 little images. I have been trying to figure out how to apply the border for a linked image thru a CSS style, but the only thing it will give me is a border that appears all of the time (not just on hover). I'm wondering if there would be a quicker way to do this. Here is a link to the page that I would like to apply the style to: http://stateline7.com/index_files/Page532.htm , and here is the page that my boss liked the appearance of: http://holmes.zenfolio.com/

a img { border:1px solid white; }
a:hover img { border:1px solid green; }
Assuming your background color is white, this will give you a green border on hover with no change in the image's effective size due to the appearance of the border.

Similar Messages

Exporting linked images with overlays

Hi,
I'm using InDesign CS5.5 on OS X Lion.
I have linked images in my InDesign document that I want to export as JPG and maintain the original file naming scheme. That part is easy (export as HTML, look in the images folder; export as ePUB, look in the images folder of the archive; etc.). But what I'm struggling with is when there are overlays added in InDesign. Some examples of overlays: part labels (e.g., "a", "b", "c"), text labels, arrows, lines, etc. The only way I've found to export the overlays is to do this:
-Group the placed image and overlay items together
-Apply Object Export Options to the grouped item such that Custom Rasterization is checked
-Export via one of the options (e.g., HTML, ePUB)
I get one image per group, which is what I want. The problem is that the filename for that image is now a random number. What I really need is the filename for the original image to be used.
I've also tried exporting to other formats, e.g., PDF (and using the extract all image options) but that doesn't preserve the overlays in the extracted images (which makes sense since the PDF sees the letters as text).
I figure to do this I have to write a script. So before I embark on that quest, I was hoping to get opinions on whether a) such a script is possible and b) whether there is a better way. For specific workflow considerations, moving the adding of these overlays to the images outside of InDesign (e.g., via Photoshop) is not an option.
I envision a script that does the following:
-Set custom rasterization on every grouped object
-Export all grouped objects and other linked images as JPG (with certain settings)
-The exported images for the links would preserve the original filename (adding "_fmt" like InDD does now would be okay) and for the grouped items it would use the filename of the linked image that is part of the group (and fallback to a random number if there is no such image). In the case that the filename could not be specified, then embed the original filename of the linked image in the group
Obviously, if a script could also do the grouping of objects (e.g., finding a linked image, checking to see if there is anything on top of it, grouping it all together), then that would be even better, but I'm not holding my breath. :-)
Thanks,
Steve

This is where the Adobe DNG could shine.
http://www.adobe.com/products/dng/index.html
Worth the read ... this can save the changes that one
makes.
DNG does NOT help in this case.
There is a huge misunderstanding that this is part of what DNG can or should do.
But if you think about it, what good are the adjustments being stored in DNG if you have to use a particular program to open it anyway?
Think about Aperture's Edge Sharpen for a second. Lets say you store that value in a DNG. Fine, what other program is going to able to reproduce that result EXACTLY to how you were previewing it at 100% on your monitor?
Lighroom is trying to do something along these lines by passing editing commands off to Bridge through DNG. But here you run into another problem - it constrains what editing any one program can do. If Lightroom is limited to only ever having editing commands that are the same as what Bridge offers, and no other program on earth supports them, then what have you really accomplished? Will unknown editing commands simply be dropped without warning?
That's why I think simply exporting projects, which hold master images alongside sidecar files (very like XMP) that describe edits are about as good as you are going to get. If you want to truly preserve editing work and you care about quality, nothing beats a TIFF file where 100% of the pixels are exactly as you reviewed them during editing. I personally trust Aperture enough to back up master images along with edits, and am fine with that.

Linked Image Swap & Enlarge on Hover/Mouseover

I have 4 linked images that need to change and grow on hover/mouseover. Originally we just wanted the images to change so I used Dreamweaver to add the rollover functionality (<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />) and it works great... But now they want more of a Mac Dock effect in that the image looks like a thumbnail and when you hover it enlarges. The trick is that when it enlarges, it needs to enlarge over everything so it doesn't rearrange the page. Also, this must work in IE7!!!!!

Yes, I have. I found this jquery hover image zoom: http://demo.superdit.com/jquery/zoom_hover/ but I can't figure out how to add the functionality of also swapping the images. I'm fairly new at webdesign so any examples or tutorials are greatly appreciated!

AI CS3 "link images with transparency" issue

i created .AI file with CS2 everything works perfectly.
when the file opened with AI CS3 some link images (.PSD files with image transparency) not appear
and gives me a error saying it cannot find or link the images.
when i replace with new link or i ignore it, still can't display the missing images
but if i opened the file with AI CS5 everything okay
how to solve this problem ?
is there any patchs for AI CS3 ??
NEED HELP

Open it in CS5 and do a save as to overwrite the older file
or save it from CS 5 as a CS 3 file.
Then try to open it in CS 3

Linked Image with CSS Hover background Color Jerks in IE8

Please see http://www.rrmuseumpa.org/about/musviews/index.shtml and hover over any of the five slideshow images, using IE8. Note that the hover causes a jerk when the assigned background color for hover kicks in, apparently by adding some vertical margin at botton. It's fine in all other browsers.
What I want is for any image that serves as a link to not have a border and to not pick up the default hover background color, and to not cause the "jerk" in IE8.
CSS file is at http://www.rrmuseumpa.org/css/main.css . Specific css would be most appreciated.
Thanks.
Jim

The very last style rule states
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
color: #FFF;
This is a white backgorund and white text. Simply change the background colour to #2565B2
Gramps

Image with Title/Description Hover on MouseOver

Hello All,
So currently I am having trouble getting this perfect. I have an image that populates dynamically, as well as Title, Description and Link to the details page. The problem is the hover is not centered to the image, and in IE it doesn't always appear when you mouse over. If anyone could please help me out I would greatly appreciate it! I haven't been able to get this to work properly, and have been working on/off for a week.
Here is the html/php code:
<div class="featured2">
    <h2>Featured </h2>
    <?php foreach ($feature as $featured) { ?>
<div class="featured-pic2">
        <img src="image/<?php echo $featured['filename']; ?>" alt="" width="320" height="320" />
        <div class="title2">
        <a href="details.php?place=<?php echo $featured['link_name']; ?>">
        <span>
     <h2><?php echo $featured['name']; ?></h2>
<p><?php echo substr($featured['description'], 0, strpos($featured['description'], '.')+1);?></p>
        </a>
        </span>
        </div>
        </div>
<?php } ?>
</div>
And here is the CSS
.featured-pic2 {
position:relative;
float:left;
width:320px;
height:320px;
padding:5px 5px 5px 5px;
border:#F00 }
.title2 {
left:0px;
top:0px;
position:absolute;
float:left;
width: 325px;
height: 325px;
top:0px;
left:0px;
.title2 a {
color: #FFF;
width: 320px;
height: 320px;
display: block;
text-decoration: none;
.title2 a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
.title2 a span {
display: none;
padding:0px;
.title2 a:hover span {
display: block;

Ok so I have made some modifications to the CSS as follows; What isn't correct now is that in IE9 the hover is white (no big deal) should be grey, but in Mozilla the hover is not centered (because I removed the padding on a:hover) to center it in IE. Other than that the functionality is great now! And just some minor details to work out.
.featured-pic2 {
    position:relative;
    float:left;
    width:320px;
    height:320px;
    padding:5px 5px 5px 5px;
    border:#F00 }
.title2 {
    left:0px;
    top:0px;
    position:absolute;
    float:left;
    width: 325px;
    height: 325px;
    top:0px;
    left:0px;
.featured-pic2 a {
    color: #666;
    width: 320px;
    height: 320px;
    display: block;
    text-decoration: none;
.featured-pic2 a:hover {
    background:#000;
    opacity:.60;
    ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter:alpha(opacity=60);
    padding: 0px;
.featured-pic2 a span {
    display: none;
    padding:5px;
.featured-pic2 a:hover span {
    display: block;

How to embed a link image with pop up windows?

Does anyone have any suggestions on how to embed a link
within flash movie? Once you click on it, it will pop up a new
window, but I want to disable the toolbars, status bar ..., and
only show the jpg image for this window.
Does anyone have any suggestions on how to do it in flash?
Thanks in advance for any suggestions
Eric

If the Oracle Web Application you are talking about uses OAFramework then you can use personalization to add a link to the Ebiz suite page. But in order to fetch the userId and append it to the URL of the link you need to extend the controller in that page and set the destination of the link you had added in the controller. You have APIs on pageContext when you override the processRequest of the extended controller to fetch the userId. You can then create the URL by appending the userId and set it on the linkBean.
If you are new to OAF then you should read the devguide and personalization guide to get yourself familiarised with extending OAF application.

Link image with another dynpro application

Dear friends,
i have put image in a view in an web dynpro application. my requirement is when i click on image anywhere it should call another view in same window.
is it possible????
if yes then assist me.

Hi Sunil,
Image UI element doesn't have any event assocaited with it. So clicking on the image will not server your purpose. But I could think of a work around. Insert a button on your view, don;t give any text for the buuton. Add the image in the mime of your component, and in the image souce property of button press F4 and select the image which you have added in your component. Now in the onaction method of that button, fire the plug to nagivate to the next view.
I hope it helps.
Regards
Arjun

Removing border around image with link

I know this is really basic but I can't find anywhere how to
avoid having a purple border around a linked image. Help
please!

Nope. Not if you want valid XHTML.
CSS does the trick -
a img { border:none; }
*and* you don't have to add it to each individual <img>
tag.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Dan.Smith" <[email protected]> wrote in
message
news:gn22if$i6k$[email protected]..
> border="0"
>
> <img src="myImage.jpg" alt="a" width="22" height="22"
border="0" />
>
> --
> Dan Smith > adobe community expert
> Flash Helps >
http://www.smithmediafusion.com/blog/?cat=11
> twitter:
http://twitter.com/dmode
>

Linked image border

This is small but irritating issue. Ever since upgrading to
CS3,
whenever I add a link to an image Dreamweaver puts the blue
border
around it. I have to manually set the border to 0 in the
properties to
get rid of it. Like I say it's no big thing but just another
step I have
to do. I cannot find anything in preferences that would have
a no border
rule for linked images. In MX2004 there this was never an
issue, if you
wanted the border you had to manually set it.
Any ideas?
Thanks.
Fred

>>Ever since upgrading to CS3,
> whenever I add a link to an image Dreamweaver puts the
blue border around
> it.
Dreamweaver is actually not doing anything. What you're
seeing is normal
behaviour for linked images in some browsers such as IE when
no border
property is specified in CSS or HTML.
>> In MX2004 there this was never an issue,
That's because MX2004 used to automatically insert border="0"
as an HTML
attribute in the <img> tag as soon as you added a link
to the image (check
for "0" being inserted in the border field in the Property
Inspector next
time you use MX 2004).
DW is moving users ever more towards CSS-only formatting and
is dropping
HTML formatting of all kinds, which includes border="0" on
linked images.
To solve the issue with CS3, just add the line "a img
(border: 0; }" to an
external stylesheet which is linked to all pages in your
site. This will
tell all browsers to apply a zero border to any image inside
an <a> tag i.e.
all linked images
Regards
John Waller

Linked Image Border Problems

This just started happening, and I can't figure out how or
how to fix it. When I open up a blank HTML page, insert an image,
then add a link to the image, DW automatically inserts a solid
border around the image. The border property is blank, where it
used to default to 0. I can manually change the border to 0 and it
gets rid of the border...but this is a pain to do for every single
linked image! Does anyone know what the problem is or how to fix
it? It used to automatically default to 0. I am using the latest DW
included with CS3.

> When I open up a blank HTML page, insert an image, then
add a link to the
> image, DW
> automatically inserts a solid border around the image.
This is actually default browser behaviour which DW is
emulating with the
code it's been given.
>The border property is
> blank, where it used to default to 0. I can manually
change the border to
> 0 and
> it gets rid of the border...but this is a pain to do for
every single
> linked
> image!
Pre-CS3, DW automatically inserted the border="0" attribute
into the <img>
tag on every single linked image.
From CS3 onwards, Adobe is dropping HTML formatting
attributes and
encouraging everyone to use CSS.
>Does anyone know what the problem is or how to fix it? It
used to
> automatically default to 0. I am using the latest DW
included with CS3.
The CSS fix is much easier than the previous default to
border="0"
behaviour.
Just add "a img ( border: none; }" (without the quotes) to
your external
linked stylesheet.
Regards
John Waller

Some of my website images with embeded links only show the link with firefox, with IE8 the image appears correctly, why does this happen

my website http://www.functionkey.net. If you view my homepage you will see that 3 of my images with embedded links only show up with the links. I am not using "_blank" in my code. The website was created using Microsoft Frontpage 2003.

If you look at the page source then you will notice that there are some errors with (missing) closing tags.<br />
Such errors shows as RED text.<br />
You need to correct at least all codes marked as red text.
The first <a> tag isn't closed here and you open a second <a>
<pre><a target="_blank" border="0" href="http://www.win-rar.com">
<div align="left">
 </div>
<div align="left">
<u><a href="http://www.smartdraw.com"></u>
<img src="images/sd_logo.gif" width="256" height="111" border="1" alt="SmartDraw - The world's first Visual Processor (TM)" hspace="0"></a></pre>

Can you wrap an image with a link in an html email signature?

When I cite a remotely hosted image in an html signature, and try to make that image a link, the link is ignored and the just the image is shown.
e.g.:
<a href="https://www.facebook.com/pages/Ubiquia/146019678805381" target="_blank">
<img style=" position:absolute;
height:30px;
width:30px;
left:172px;
top:157.5px"
src="http://png.findicons.com/files/icons/2779/simple_icons/48/facebook_48_black.png" alt="ubiquia facebook" moz-do-not-send="true"
>
</a>

For each icon that you want to use in your email signature:
locate icon on internet webpage - right-click on the icon and select 'Save Image as'. Save the icon to your computer in a suitable file.
Then in Thunderbird
insert > Image
choose file - locate the saved icon on your computer
click on Link tab and enter the www etc webpage link info
click on OK to insert image with link.
Codewise, where you have the actual icon you would need something stating where the icon is located:
eg
<a href="https://www.facebook.com/pages/Ubiquia/146019678805381" target="_blank">
path to image saved on computer included in within <> </a>

In browser editing: Can my client add new images with hyper-links to their websites without having to replace images already there?

My client would like to be able to add new images to their site themselves and use them as hyper-links to external sites without having to replace an old image with the new one (or blank place holding images - far from ideal). Is there ANY way that this is possible? They do not wish to update and add new images/links regularly and it is certanly not intended to be used as a blog or way of being able to constantly keep content new and fresh otherwise I would set them up with a blog account and add that to the site. It is merely a way of adding links to other local businesses every once in a while.
Please see the page they wish to update... Friends. (Please excuse the layout... the customer will not be able to resize or edit the images themselves and wishes to add them as-is!)
Thanks in advance for any help. If anybody knows how I can ask an Adobe official mod, that would be great... that, or make a request for a future addition in an update?
Warm regards,
Ben Gathercole

Hi Andria,
Changing links is currently not possible with in-browser editing.
Please post this as a feature request in the following feedback form :
http://feedback.inbrowserediting.com/?url=
Regards,
Akshay

HELP!!!! I have spent hours trying to find out how to embed an image with a link or a Microsoft Word document with a hyperlink built within the document -- not as an attachment! Does ANYONE know the secret? Can it be done, or not! My PC clients do it.

HELP!!!! I have spent hours trying to find out how to embed an image with a link, or embed a Microsoft Word document with a hyperlink built within the document -- not as an attachment into my email -- but where it shows as the email content when opened! Does ANYONE know the secret? Can it be done, or not? My PC clients do it all the time easily. Then I want to be able to send the embedded image/document (not as an attachment, but visable within the email when opened) to many email contacts at once, BUT the individuals receiveing them DO NOT SEE the other email contacts. Cannot seem to be able to find anything on being able to do these 2 tasks.PLEASE, SOMEONE, HELP!!!

Don't know if this applies to Lion, but read here:
http://www.makeuseof.com/tag/create-html-announcement-mail-iweb-mac/

Linked Image with border on hover

Similar Messages

Maybe you are looking for