Tabbed links with fade to expanded image with hotspots
The description pretty much says it all. The page I'm creating will feature several tabs around an interior text area. When the tabs are rolled over, an image will fade in next to it, with two hot spots linking to other pages. There will be ten tabs, and each tab will activate the faded-in image, and each image will give a choice of going to one of two pages. I've tried fade/appear on an AP div, but the fade does not "hide" the div, it only makes its opacity zero.
What I'm trying to do seems like a standard menu function, but all the possible solutions available seem to want greater complexity. If you want to see what the page will look like go here: http://cardsforliving.com (for a static image only). Please help. If you can, please e-mail me at jay(dot)mcpherson(at)gmx(dot)com and if necessary we can set up a Skype conversation from there.
Thank you!
If I understand you correctly, you would like for a box to appear on a hover. If that is the case, do a search for tooltips, you should find plenty there. You can also use a dis-jointed rollover.
Look at those two options, it sounds like what you are looking for.
hth
Gary
Similar Messages
-
CS4: crash with right-click on image with clipping path!
I have a placed image. It is TIFF and has aPhotoshop Path. The path is not on when placed. Then I select the TIFF image and choose clipping > options.
I select the Photoshop path.
Now I want to change the path to a frame so I right-click on the image...
Everytime in Mac OS X 10.5.5 the beachball cursor and I crash!EWh...no, it was NOT a faceless apllication. It had to do with a corrupted preference! Has to do with the 'Edit with' list, see also this post:
F vd Geest (aka. Wa veghel), "CS4 crash on 'Edit with' how to solve?" #, 24 Dec 2008 9:31 am -
Problems with manipulating an SVG image with JavaScript.
I've created a website where I'm using jQuery to clone and manipulate SVG content to create multiple different images within the page (I'm also making use of Keith Wood's SVG libraries to help make jQuery work with SVG).
http://httpflies.com/
This seems to be working fine initially. However, when a user clicks the graphic I then clone the clicked graphic and place that in another part of the page. At this point part of SVG content is lost. The SVG contains a number of vectors and a bitmap (for a drop-shadow). The vectors all disappear but the bitmap remains.
I've checked it out in the dev tool and the SVG content is being cloned (it seems) and can be inspected and Firefox seems to think it's in the correct part of the page etc. Yet it's not visible.
In terms of the jQuery involved it's just this:
$('#'+hash).clone().attr('id','').prependTo(targetElement);
It works fine in Chrome, Safari and Opera but I'm looking at FF 24.0 on Mac and FF 23 on Win7 and both are doing the same thing. I'm getting no errors in the console either! :-S
Thanks in advance to anyone who can shed some light ;-)OK this was simply down to me not being careful enough about making sure the ID's I was using in the SVG (to define gradients etc) weren't remaining unique across all the cloning and appending.
That's not just the ID's of the SVG elements themselves but the <lineargradient> elements within those SVG elements which I was referencing from within those same SVG's.
Seems like some debugging tools related to this kind of thing would be useful as it wasn't really clear that this was the problem. Just to know that there are multiple identical ID's within a DOM would be very useful.
Anyway sorry about wasting anyone's time and if you have a similar problem, think about those ID's! ;) -
Problem with moving around a image with ease
Hi,
I'm trying to move a image around when a keyboard button is pressed. Everything works until I tried to build in an easing movement. Here is my code:
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class Player extends Applet implements KeyListener
private Image player;
private int xpos;
private int ypos;
private Graphics buffer;
private Image offscreen;
private boolean walkright,walkleft;
public void init()
xpos = 10;
ypos = 50;
player = getImage(getCodeBase(),"mario.gif");
offscreen = createImage(320,192);
buffer = offscreen.getGraphics();
buffer.drawImage(player,xpos,ypos,this);
addKeyListener(this);
public void update(Graphics g)
paint(g);
public void paint(Graphics g)
g.drawImage(offscreen,0,0,this);
public void keyTyped(KeyEvent e){}
public void keyReleased(KeyEvent e){}
public void keyPressed(KeyEvent e)
int keyCode = e.getKeyCode();
switch(keyCode)
case 39:
moveRight();
break;
case 37:
break;
repaint();
public void moveRight()
walkright = true;
int newxpos = xpos + 20;
int temp = 0;
System.out.println(newxpos);
while(walkright)
if(xpos < newxpos)
temp = (newxpos-xpos)/10;
xpos += temp;
//System.out.println(xpos);
buffer.clearRect(0,0,320,192);
buffer.drawImage(player,xpos,ypos,this);
repaint();
else
System.out.println("in break");
walkright = false;
}The problem is that the int xpos stayes the same, and I don't know why.Hmm, everything works but somehow the paint method is only called ones which causes the movement 20 pixels a time. Weird :S
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class Player extends Applet implements KeyListener
private Image player;
private double xpos;
private double ypos;
private Graphics buffer;
private Image offscreen;
private boolean walkright,walkleft;
public void init()
xpos = 10;
ypos = 50;
player = getImage(getCodeBase(),"mario.gif");
offscreen = createImage(320,192);
buffer = offscreen.getGraphics();
addKeyListener(this);
public void update(Graphics g)
paint(g);
public void paint(Graphics g)
System.out.println("boe");
buffer.drawImage(player,Math.round((int)xpos),Math.round((int)ypos),this);
g.drawImage(offscreen,0,0,this);
public void keyTyped(KeyEvent e){}
public void keyReleased(KeyEvent e){}
public void keyPressed(KeyEvent e)
int keyCode = e.getKeyCode();
switch(keyCode)
case 39:
walkright = true;
moveRight();
break;
case 37:
//moveLeft();
break;
public void moveRight()
double endX = xpos + 20;
while(walkright)
double stepX = (endX - xpos) / 10;
if (Math.round(xpos) < endX )
System.out.println(Math.round(xpos));
xpos += stepX;
buffer.clearRect(0,0,320,192);
repaint();
try
Thread.currentThread().sleep(100);
catch(InterruptedException e){}
else
walkright = false;
} -
What adobe product to use to create MP4 with video and slide images with time codes
I wanted to create an MP4 that has video and PPT slide converted to JPG images. What software should I use to create one? Thanks for your help.
Community: Premiere Pro | Adobe Community
CS5-thru-CC PPro/Encore tutorial list http://forums.adobe.com/thread/1448923 will help -
Creating Windows 8.1 master image with MDT 2013,cannot capture .WIM
I am having an issue with creating a master image with Windows 8.1 and MDT 2013.
I have followed extensive tutorials on how to create a master image using Microsoft Deployment Toolkit. my goal is to have a fully configured windows 8.1 image which I can deploy through Windows Deployment Services. I have been relatively successful thus far,
except for one issue I have run into, which is successfully capturing this image as a .WIM.
I have successfully created a task sequence and the task sequence is able to run all the way through until the final step. Essentially the task sequence is supposed to install Windows and Office, then suspend the task sequence to allow me to make customisations
to the start screen and desktop background, and I simply click resume task sequence, and the task sequence should sysprep reboot and capture the machine image as a .WIM file.
the task sequence is able to sysprep the machine, but upon rebooting it boots into out of box experience, and does not create a wim file. I receive an error saying: "cannot find script file C:\ltibootstrap.Vbs" after the machine completes OOBE
I am using Windows Server 2012 r2, creating my Master machine image using hyper-v, and my master image is running Windows 8.1.
Any help would be greatly appreciated.I'm not sure about the sequence of steps here. Try taking your captured.wim file and deploying it using MDT again, or at least to another machine. MDT sometimes leaves extra files around on the captured machine, so simply rebooting it may not get a accurate
test results.
IF you are getting the ltibootstrap.vbs it is most likely because there is a stray unattend.xml file somewhere in your image that is looking for this file. Crack open your Wim file and search for any unattend.xml files.
Keith Garner - Principal Consultant [owner] -
http://DeploymentLive.com -
What would cause images with captions to not show up?
Still struggling with this issue. Images with captions are not showing up on the iPad preview.
Please help!
Thx!Hi Andrew,
I have been struggling with this for days. I am working on it with Apple. We re-installed the software, I re-installed OSLion, I re-started in safe mode, looked at startup items, cache, etc.
Now I am about to create a partition and test again to determine if the issue is with another software program on my system.
BTW, I noticed this starting AFTER I upgraded to 1.1, but maybe that is a coincidence. Do you know if it started for you after the update? ALSO, check your help screen in IBA. Does it look the attached? This started happening at the same time as the caption/image issue.
Please stay in touch as you the first person other than myself (that I know about), who is having this issue.
I look forward to hearing if you have the Heklp issue.
THANKS!
Belinda -
How do I batch resize images with different aspect ratios?
How do I batch resize images with different aspect ratios?
poa66 wrote:
Landscape: I want result to be 1960 x 1103 px and 72 ppi whether the original is 300 ppi or 220 ppi and wether it is 2Mb or 10 Mb. Cropped centered top and bottom.
There will be a set of Landscapes that that have a narrower aspect ratio the 1960:1103 that would also need the top and bottom cropped like all Portraits would could be. You need to realize that center cropping Landscape image that have aspect ratios near 1960:1103 will usually produce acceptable compositions. However Cropping wide panoramas and portraits will only produce acceptable landscape 1960:1103 composition occasionally.
Here you will see what happens when image have aspect ratio the do not fit the desired aspect ratio. Where Landscape are forced to portrait and portrait forced to Landscape. Here are two Collage I populated with a mixture of image with different aspect ratios. One collage has all 3:2 Landscape places and the other 2:3 Portrait places.
I create a 1 image 1960x1103 collage 72dpi and create those too. Note the landscape boy foot is cropped off 3:2 is narrow compared to 1960:1103 -
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> -
Rotating Image with Fade Effect
Ok looking to rotate an image with a fade effect; below is a rotating image code.
(Wanting this effect to be transitional and smooth. Transparency? Opacity?)
<script language="JavaScript">
<!--
function adArray() {
for (i=0; i*2<adArray.arguments.length; i++) {
this[i] = new Object();
this[i].src = adArray.arguments[i*2];
this[i].href = adArray.arguments[i*2+1];
this.length = i;
function getAdNum() {
dat = new Date();
dat = (dat.getTime()+"").charAt(8);
if (dat.length == 1)
ad_num = dat%ads.length;
else
ad_num = 0;
return ad_num;
var ads = new adArray(
"img1.jpg","http://www.domain.com",
"img2.jpg","http://www.domain.com",
"img3.jpg","http://www.domain.com");
var ad_num = getAdNum();
document.write('<div align="center"><A HREF="'+ads[ad_num].href+'" target="_blank"><IMG SRC="'+ads[ad_num].src+'" '
+'BORDER=0 name=js_ad></A></div>');
link_num = document.links.length-1;
function rotateSponsor() {
if (document.images) {
ad_num = (ad_num+1)%ads.length;
document.js_ad.src = ads[ad_num].src;
document.links[link_num].href = ads[ad_num].href;
setTimeout("rotateSponsor()",4000);
setTimeout("rotateSponsor()",4000);
// -->
</script>
Any ideas?Here is the script I finally got working! It would have not came to me without your help guys!
<script>
var pictureWebPartName="Pictures"; // name of the picture library web part
var showThumbnails = true; //otherwise show full sized images
var randomImg = true; //set to true to show in random order
var useCustomLinks = false; //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000; //2000 = 2 seconds
var imgToImgTransition = 1.0; //2 = 2 seconds
// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;
function RotatingPictures()
imgTag = document.getElementById("RotatingImage");
//Find the picture web part and hide it
var Imgs = [];
var x = document.getElementsByTagName("TD"); // find all of the table cells
var LinkList;
var i=0;
for (i=0;i<x.length;i++)
if (x[i].title == pictureWebPartName)
// tables in tables in tables... ah SharePoint!
LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
// hide the links list web part
LinkList.style.display="none";
break;
if (!LinkList)
document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
//Copy all of the links from the web part to our array
var links = LinkList.getElementsByTagName("TR") // find all of the rows
var url;
var len;
for (i=0;i<links.length;i++)
//if (links(i).id.match("row")!=null)
if (links[i].childNodes[0].className=="ms-vb2")
len=Imgs.length
Imgs[len]=[]
Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
if (useCustomLinks)
if (links[i].childNodes[1].childNodes.length>0)
{ Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
else
{ Imgs[len][1] = "" }
if (Imgs.length==0)
document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
for (i = 0; i < Imgs.length; i++)
imgCache[i] = new Image();
imgCache[i].src = Imgs[i][0];
if (useCustomLinks)
imgCache[i].customlink=Imgs[i][1];
RotatingPicturesLoop();
// now show the pictures...
function RotatingPicturesLoop()
if (randomImg)
selectedImg=Math.floor(Math.random()*imgCache.length);
if (document.all){
imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
imgTag.filters.blendTrans.Apply();
url=imgCache[selectedImg].src
if (useCustomLinks)
{ RotatingImageLnk.href=imgCache[selectedImg].customlink; }
else
{ RotatingImageLnk.href = url; }
if (showThumbnails)
// convert URLs to point to the thumbnails...
// from airshow%20pictures/helicopter.jpg
// to airshow%20pictures/_t/helicopter_jpg.jpg
url = revString(url);
c = url.indexOf(".");
url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
c = url.indexOf("/");
url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
url = revString(url) + ".jpg";
imgTag.src = url;
if (document.all){
imgTag.filters.blendTrans.Play();
selectedImg += 1;
if (selectedImg > (imgCache.length-1)) selectedImg=0;
setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) {
var retStr = "";
for (i=str.length - 1 ; i > - 1 ; i--){
retStr += str.substr(i,1);
return retStr;
// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures");
</script>
<!-- add your own formatting here... -->
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
<img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
<span name="RotatingImageMsg" id="RotatingImageMsg"></span>
</td>
</tr>
</table>
</center>
Thanks again guys! -
Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.
Oh wow, looks like a new feature.
The "page" links in a stylesheet with the address "resource://gre/res/TopLevelImageDocument.css". If you remove that reference, then the image displays in the old style.
'''''Edit: Please skip the rest of this post and check out the next one.'''''
There might be a more elegant solution than that, but you could use a bookmarklet to strip out that link when you want to view the page in its old style. A bookmarklet is a snippet of JavaScript you save on the Bookmarks toolbar for quick access.
First, copy the following code to the clipboard (it's all one long line):
<br>javascript:var ssheet=document.querySelector('link[href="resource://gre/res/TopLevelImageDocument.css"]'); if(ssheet)ssheet.parentNode.removeChild(ssheet); void 0;
Next, if you are not displaying the Bookmarks Toolbar, use View > Toolbars > Bookmarks Toolbar to display it. (If you aren't using the classic Menu bar, press Alt+v to call up the old View menu. Right-clicking the gray area just below the page address also allows you to display the Bookmarks Toolbar.)
Right-click on the Bookmarks Toolbar (or Mac equivalent of right-click!) and choose New Bookmark.
Paste the code into the Location box (the second box).
Then type a useful name in the Name box (e.g., Oldstyle Picture) and click Add.
Now, when you want to tweak the image display, click the button to run the script.
Manual clicking is a hassle, so it might make sense to look into other solutions. (Greasemonkey didn't seem to work; I think it might not run on .jpg files.) -
Currently, I can copy ONE tab's url and nothing else (not its name). Or I can bookmark all tabs that are open. However, I'd like to have the ability to select multiple tabs and then copy ALL of the the URLs AND their titles/or copy ALL of the URLs+titles+HTML links? This can be done with the Multiple Tab Handler add on; when I download the add on, I get a message saying that using the add on will disable Firefox's tab features. I prefer to use Firefox features rather than download and use an add on. Is there a way to do this without an add on?
Hi LRagsdale517,
You should definitely be able to upload multiple files by Shift-clicking or Ctrl-clicking the files you want to upload. Just to make sure you don't have an old version of the service cached, please clear the browser cache and then log in to https://cloud.acrobat.com/files. After clicking the File Upload icon in the upper-right corner, you should be able so select multiple files for upload.
Please let us know how it goes.
Best,
Sara -
On opening some pdfs in new tab, get a box labeled Adobe Acrobat with a ? in it. Go back to the original link, right click on the link gets the pdf. What does the box and ? mean and why do I get it when trying to open some pdfs? Running W7, FF 10.0.2, Adobe Standard 9. Thanks.
Assuming that you are using IE10 / IE11 on Windows: http://support.microsoft.com/kb/2716529
-
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,
SteveThis 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. -
I have a page with 2 nav links originating from 2 different images. 1 image / link works well with Firefox, Chrome and Safari. The other image / link works well with firefox, only half of the image is active in Chrome and none of the image is active in safari. The documents links checkout fine. I have replaced the image, the container as well as relinked. The result is the same. Can someone help please? Here is a link to my site (in progress) PikiPiks: film reviews Only the first 2 images in the left column are currently linked. The first image / link for "Kiki's Delivery Service" is the problematic one. Thanks! MacOS 10.9 / Dreamweaver CS6
Fix the code errors.
Validation Results - W3C Markup Validator
I won't even talk about the liberal usage of absolute positioning -- none of which is needed. You'll soon learn that this is not the way to build web pages when this comes back to bite you in the butt. It almost looks like this layout was created in another program. Was it?
#1 On the web file names cannot contain special characters like apostrophes. <a href="Kiki'sDeliveryService.html"> is not a valid file name. You need to rename without the apostrophe.
#2 This link is pointing to a file on your local hard drive which nobody except you can see.
<a href="file:///CARBUNKLE/Users/jev/Sites/WowAbout/index.html"> That path should be pointing to your site.
Nancy O.
Maybe you are looking for
-
Error: the system administrator has set policies to prevent this installation
While trying to sync my husband's new iPad 2 to our computer, I encountered the following problem. I currently have iTunes 10.1.1.4 installed on my computer but was told to update to the latest version of iTunes 10.2.2. After trying to do this, I rec
-
Export and split mail merge to Word Documents
Hi there, I have a mail merge which creates one very long Pages document. I need to split the pages document into separate MS Word documents. Any suggestions?
-
How to reference clients last page hit
I am wondering if in the session or request object that there is a way to indentify the clients last page that they were accessing. thanks in advance
-
PDF file creation using backend package
How to create a PDF file using Oracle 10G Backend Package?
-
Hi,i am using iphone mobile and i have trouble from iphone
hi,i am using iphone mobile and i have trouble from iphone WHEN WE USE IPHONE THEN THE IPHONE 4G IS AUTOMATIC TURN OFF. AFTER THAT WE CHARGE THE MOBILE & MOBILE IS AUTO ON. THE PHONE IS 100% CHARGE BUT WE CALL 1-2 CALL THE PHONE IS AUTO SWITCH OFF &